Question

目前我有一个vue-multiselect组件，需要v-model。

我想包装这个组件，以便我可以构建一个单选组件和一个多选组件。

在处理单个选择组件时，我遇到了以下警告

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "model"

他们是对的但在我的情况下我真的需要更改父的值（就像我用vue-multiselect代码替换我的单选代码）组件而且我也做不想要这个警告。

以下是我的组件的代码：

Vue.component('single-select', {
    props: {
        model: {
            required: true
        }
    }
    template: '<multiselect\n' +
    '    v-model="model"\n' +
    ...>\n' +
    ...
    '</multiselect>'
});

一种解决方案是将函数作为模型参数传递并从父级返回字段，但我真的希望有更好的解决方案。

Answer 1

Vue有一个名为.sync modifier的双向绑定快捷方式。

在您的情况下如何运作：

将model作为道具

传递时添加.sync

<single-select :model.sync="..."></single-select>

在孩子的输入事件中发出update:model

Vue.component('single-select', {
    props: {
        model: {
            required: true
        }
    },
    template: `<multiselect :value="model" @input="$emit('update:model', $event)"> </multiselect>`
});

Answer 2

只需为内部model引用指定一个不同的名称，并在Vue组件的数据函数中手动映射它：

Vue.component('single-select', {
    props: {
        model: {
            required: true
        }
    },
    data: function() {
        return {
            singleSelectModel: this.model
        };
    }
    template: '<multiselect v-model="singleSelectModel"></multiselect>';
});

这当然是假设您不想改变父数据，而只是制作model的副本并让子组件可以随时自由地更改它想。

如果您想要更新子项中的父数据，则必须查看从子项发出的事件并在父级中进行侦听。

vuejs将模型从父组件传递给子组件并允许变异

2 个答案: