Vue.js 在for循环里使用组件, 如何给列表绑定-自定义事件

Question

父组件:

<template>
    <div v-for="item in myway.list">
        <comp-a :data="item.meta" @child-change="handle"></comp-a>
        <comp-b :opt="optKey"></comp-b>
    </div>
</template>
<script>
    export default {
        data: {
            return {
                myway: {
                    list: [
                        {
                            meta: {
                                title: 'dd',
                                content: 'ss'
                            }
                        }，
                        {
                            meta: {
                                title: 'dd',
                                content: 'ss'
                            }
                        }，
                        {
                            meta: {
                                title: 'dd',
                                content: 'ss'
                            }
                        }
                    ]
                },
                optKey: ''
            }
        }
        methods: {
            handle (val) {
                console.log(val)
                this.optKey = val
            }
        }
    }
</script>

子组件A：

<template>
    <li class="subject">1{{ data.title }}</li>
    <li class="content">1{{{ data.content }}}</li>
</template>
<script>
    export default {
        name: 'comp-a',
        props: ['data'],
        data: {
            return {
                keys: ''
            }
        }
        methods: {
            this.$emit('child-change', this.keys)
        }
    }
</script>

请问如何处理这种情况，任何一个handle的操作影响了所有的组件com-b

Answer 1

可以考虑在 item 里增加一个 optKey 属性：

父组件中：

<comp-a :data="item.meta"></comp-a>
<comp-b :opt="item.optKey"></comp-b>

子组件中：

this.$emit('child-change', this.keys)改为this.data.optKey = this.keys

Answer 2

试试.self修饰符 @child -change.self="handler"