vue.js - VueJS 通过 v-for 与父容器通信，提供索引和参数

Question

我知道我可以像这样与组件的父级通信:

<container>
    <child-component v-for="(thing, index) in things"
    :key="index"
    v-on:thingDidSomething="thingDidSomethingInParent(index)"  
    ></child-component>
</container>

但是，如果我想从 thingDidSomething 子方法中提供参数怎么办:

v-on:thingDidSomething="thingDidSomethingInParent" 

和提供索引(键)。我可以访问子组件中的 key 吗？

Answer 1

this.$vnode.key 将为您提供子组件内的 key 值。 $vnode 属性未记录为 public API 的一部分尽管。我认为最安全的方法是这样的:

<child-component v-for="(thing, index) in things"
:key="index"
:index="index"
v-on:thingDidSomething="thingDidSomethingInParent"  
></child-component>

和组件

Vue.component("child-component",{
    props:["index"],
    methods:{
        emitThingDidSomething(){
            this.$emit('thingDidSomething', this.index, <other arguments>)
        }
    }
})

Example .