Vue中如何将子组件的listaToateOptiunile值传入父组件v-model的myList？

Vue 2 解决方案 #

1. 子组件声明value属性接收父组件v-model传递的值
2. 将子组件中listaToateOptiunile替换为计算属性，通过getter同步父组件值，setter触发input事件通知父组件更新

修改后的子组件代码：

template: `
    <li v-for="option in listaOptiuni" :key="option.id">
        <input v-model="listaToateOptiunile" :value="option" :id="option.id" type="checkbox" class="uk-checkbox">
        <label :for="option.id">{{ option.denumire }}</label>
    </li>
`,
props: ['value', 'listaOptiuni'], // 新增value属性，listaOptiuni建议通过props传入
computed: {
    listaToateOptiunile: {
        get() {
            // 父组件无初始值时返回空数组
            return this.value || []
        },
        set(newSelected) {
            // 触发input事件，父组件v-model会自动接收更新后的值
            this.$emit('input', newSelected)
        }
    }
}

注意：原代码中@change绑定的两个方法可移除，v-model配合计算属性已完成数据同步；listaOptiuni通过props传入能提升子组件复用性。

Vue 3 解决方案 #

Vue 3中v-model默认绑定modelValue属性，触发update:modelValue事件，调整子组件如下：

修改后的子组件代码：

template: `
    <li v-for="option in listaOptiuni" :key="option.id">
        <input v-model="listaToateOptiunile" :value="option" :id="option.id" type="checkbox" class="uk-checkbox">
        <label :for="option.id">{{ option.denumire }}</label>
    </li>
`,
props: ['modelValue', 'listaOptiuni'],
computed: {
    listaToateOptiunile: {
        get() {
            return this.modelValue || []
        },
        set(newSelected) {
            this.$emit('update:modelValue', newSelected)
        }
    }
}

父组件的v-model写法无需修改，Vue 3会自动识别modelValue和对应的更新事件。

内容的提问来源于stack exchange，提问作者kevsterdev