Vue2从循环组件中的子级调用父方法 [英] Vue2 call parent method from child in looped component

问题描述

我正在循环具有子组件的根组件.

I'm looping root component, which have with child component.

<root-select v-for="offer in offers"  >
   <child-options v-for="item in options" >
   </child-options>
</root-select>

但是，当我 $emit 子函数的根函数时，我所有的根组件都更改了这些数据.

But, when I $emit root function from child, all my roots component changed those data.

孩子:

EventBus.$emit('toggle', value);

根:

EventBus.$on('toggle', this.toggle);

但我需要，该数据仅在触发组件中发生变化.

But I need, that data changes only in triggered component.

谢谢.

推荐答案

尽量不要使用 Event bus 来发射.使用正常的 Emit 方式从孩子发射到父母.

Try not to use Event bus to emit. Use normal Emit way to emit from child to parent.

在子组件函数中:

this.$emit('toggle', value);

在父组件函数中:

<template><child-options v-for="item in options" @toggle="onToggleFn"></child-options></template>

<script>
...
methods:{
     onToggleFn:function(){
         //your logic here
     }
}
</script>

这篇关于Vue2从循环组件中的子级调用父方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！