1

我有一个包含许多容器的父组件。每个容器都有一个图像和一些按钮。

我已经过度简化了下面的父子组件。单击子组件中的按钮时，我想在父容器中的元素上切换类。我想单独影响每个图像，而不是全局。我该怎么做呢？

家长：

<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>
4

2 回答 2

1

如何将数据从childto传递的过度简化示例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
}

编辑：（为每个单独的容器切换类）：

我可能会为容器创建一个新组件(container.vue)，将 apath作为道具传递：

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

<script>
export default {
   props: {
       path: String,
   },
   data() {
       return {
           mock: false
       }
   },
   methods: {
       doSomething(value) {
           this.mock = value;
       }
   }
}
</script>

然后在 中Parent.vue，您可以导入容器组件并像这样使用它：

<template>
   <Container path="/path-to-file.jpg" />
   <Container path="/path-to-file.jpg" />
</template>
于 2021-12-16T18:44:10.340 回答
0

您的情况与插槽无关。您需要从按钮向父级“发出事件”，并传递模拟数据以更新 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)
  }
}

请阅读代码，如果您有任何问题，请告诉我。

于 2021-12-16T18:46:44.713 回答