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"

和提供索引（键）。我可以访问子组件中的密钥吗？

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

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

1 个答案: