VueJS 通过 v-for 与父容器通信，提供索引和参数 [英] VueJS communicate with parent container via v-for, supply both index and arguments

问题描述

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

I know I can communicate with the parent of a component like this:

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

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

However what if I want to supply arguments from the thingDidSomething method in the child:

v-on:thingDidSomething="thingDidSomethingInParent" 

和提供索引(键).我可以访问子组件中的密钥吗?

and supply the index (key). Can I access the key in the child component?

推荐答案

this.$vnode.key 会给你子组件内的 key 值.$vnode 属性未记录为 公共 API 虽然.我认为最安全的方法是这样的:

this.$vnode.key will give you the key value inside the child component. The $vnode property is not documented as part of the public API though. I think the safest way to do this would be something like this:

<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>)
        }
    }
})

示例.

这篇关于VueJS 通过 v-for 与父容器通信，提供索引和参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！