当 prop 值未定义时，设置值会导致警告

Question

我有一个用于填充表单的初始数据模型。我有各种通过 prop 获取数据的子组件。但是，如果我通过道具传递 undefined ，我以后不能在没有 VueJS 给我警告的情况下设置该值。但有时，我的数据是未定义的，这没关系，并且表单可以使它不是未定义的（通过 .sync 修饰符）。如何避免此警告？

示例

初始数据模型：

{
    color: undefined
}

应用模板：

<div>
    <color-picker v-bind:color.sync="color"></color-picker>
</div>

子组件模板：

<div>
    <button v-on:click="setRed"></button>
</div>

子组件控制器/定义/随便：

Vue.component('color-picker', {
    props: {
        color: {
            default: function () { return 'blue'; }
        }
    },
    methods: {
        setRed: function () {
            this.$set(this, 'color', 'red');
        }
    }
})

即使传递给道具的数据未定义，道具默认值也不会触发。 this.color 的值仍然是 undefined。

但是，当我单击按钮设置颜色时，我收到来自 VueJS 的警告，说不要添加反应性属性，请预先声明数据。

Answer 1

您应该使用this.$emit('update:color', 'red') 来更新您的道具：Working example。

还可以看看documentation about the .sync modifier。