vue 父组件通过v-on监听子组件$emit的事件,如何同时接受子组件的值并传入当前组件的参数?

问题:
1 子组件通过this.$emit('ok', newValue)方法向父组件传递新的值
2 父组件需要通过index知道是改变的list中哪一个的值
3.该子组件用在了很多地方,内部逻辑改变的话会比较麻烦
所以,setData 方法newValue和index都是需要的。

补充问题:
父组件list.splice(2, 1),删除了一个子组件,但是该子组件不是第二个而是最后一个,请问该怎么解决呢?

尝试解决:
<child @ok="setData" :options="item.option"></child>传递不了index
<child @ok="setData(index)" :options="item.option"></child>传递不了newValue

请教各位大佬,怎么做才能实现传递两个值,或者实现类似的功能?

父组件:

<div v-for="(item, index) in list">
 <input type="text" v-model="item.data">
 <child @ok="setData" :options="item.option"></child>
</div>
data () {
 return {
  list: [
   {data:'123', option: {...}},
   {data:'456', option: {...}},
   {data:'789', option: {...}}
  ]
 }
}
methods: {
 setData(newValue, index) {
   this.list[index] = newValue
 }
}

子组件:

<div>...</div>
methods: {
 ok (newValue) {
   this.$emit('ok', newValue)
 }
}
阅读 5.5k
2 个回答

<child @ok="setData($event, index)" :options="item.option"></child>

把index作为props传给child,在emit事件时再把index放到data里和newValue传回来

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题