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。

如果未定义prop值，则设置值会导致警告

1 个答案: