Vue：將數據從子級切換到父級的按鈕

Question

我有一個包含許多容器的父組件。 每個容器都有一個圖像和一些按鈕。

我已經過度簡化了下面的父子組件。 單擊子組件中的按鈕時，我想在父容器中的元素上切換 class 。 我想單獨影響每個圖像，而不是全局。 我該怎么做呢？

家長：

<template>
  <div>
    <div :class="{ active: mock }">
      <img src="/path">
    </div>
    <toggleButtons/>
  </div>

  <div>
    <div :class="{ active: mock }">
      <img src="/path">
    </div>
    <toggleButtons/>
  </div>
</template>

<script>
import toggleButtons from './toggleButtons'
export default {
  name: "parent",
  components: {
    toggleButtons
  }
};
</script>

孩子：

<template>
  <div class="switch-type">
    <a @click="mock = false">Proto</a>
    <a @click="mock = true">Mock</a>
  </div>
</template>

<script>
export default {
  name: "toggleButtons",
  data() {
    return {
      mock: false
    }
  }
};
</script>

Answer 1

如何將數據從child級傳遞給parent級的過度簡化示例：

孩子：

<a @click="$emit('mockUpdated', false)">Proto</a>
<a @click="$emit('mockUpdated', true)">Mock</a>

父（模板）：

<toggleButtons @mockUpdated="doSomething" />

家長（方法）：

doSomething(value) {
  // value will be equal to the second argument you provided to $emit in child
}

Answer 2

您的情況與插槽無關。 您需要從按鈕向父級“發出事件”，並傳遞模擬數據以更新 img 狀態。 老虎機是一個非常不同的東西。 有多種方法可以實現您的目標。 一種方法可能是這樣的：

父母

<AppImage v-for="img in imageData" :key="img.id" :image="img"/>

data() {
  iamges: ["yourPath1", "yourPath2"] 
},
computed: {
  imageData() {
    // adding ID is almost always a good idea while creating Vue apps.
    return this.images.map(x => {
      id: Math.floor(Math.random() * 1000),
      path: x
    })
  }
}

圖片.vue

<img :path="image.path" :class={ active: mock} />
<toggleButtons @toggled=changeImageState />

props: [image],
data() {
  mock: ''
},
methods: {
  changeImageState(event) {
    this.mock = event
  }
}

切換按鈕.vue

<a @click="toggleMock(false)">Proto</a>
<a @click="toggleMock(true)">Mock</a>

emits: ['toggled']
methods: {
  toggleMock(val) {
    this.$emits('toggled', val)
  }
}

請閱讀代碼，如果您有任何問題，請告訴我。