Vue.js道具,组件和数据命名空间

Question

当我有一个Vue.js组件时,它看起来像:

import Icon from './Components/Icon.vue'
export default {
    props: {
        data: {type: Object}
    },
    data() {
        return {
            label: this.data.label || '',
            icon: this.data.icon || '',
            placeholder: this.data.placeholder || '',
            value: this.data.value || '',
            disabled: this.data.disabled || false,
            readOnly: this.data.readOnly || false,
            options: this.data.options || []
        }
    },
    components: {
        Icon: Icon
    }
}

命名空间如何在Vue中工作？是道具键,数据返回对象键,以及所有组件对象键都会被添加到this实例中吗？是否存在错误/重写内容的风险？

所以,如果我覆盖this.data,我仍然可以读取我收到的原始值props吗？

什么是在data状态对象中设置"默认"值的社区实践,props因此我们都可以拥有一个动态state对象,并保留props它以防万一我们需要它？

并且相关:如果通过props,v-bind我应该将它们添加到watch我的组件内部吗？或者将我的所有动态值作为计算版本,并在props每次调用它时考虑到它？

感谢您的反馈.

Answer 1

如果您的财产名称有冲突,Vue会发出警告.例如,如果您在组件中有此:

props: ['foo'],
data() {
  return {
    foo: 'bar',
  }
},

你会得到这个警告:

[Vue警告]:数据属性"foo"已经被声明为prop.请改用prop默认值.

并且(如警告所述),如果你想设置道具的默认值,你应该在道具的定义中这样做:

props: {
    foo: { type: String, default: 'bar' }
},

在您的示例中,您传递一个名为prop的prop,data并使用它来设置Vue组件的数据属性.因此,该组件将有机会获得this.label,this.icon等等,它也将有机会获得this.data.label,this.data.icon等等.

这不会覆盖任何内容,因为您的prop命名data引用的是与组件的数据属性不同的对象.但是,您可能不想为某个属性命名data,因为您可以看到它可能会让人感到困惑.

通常,您似乎试图将具有属性值的对象传递给组件,而不必单独设置每个对象.您可以这样做v-bind:

// assuming that var settings = { foo: 1, bar: 2 }
<child-component v-bind="settings"></child-component>

子组件:

props: {
  foo: { type: Number, default: 0 },
  bar: { type: Number, default: 0 },
  // you can still set defaults for props not passed in the object
  baz: { type: Number, default: 0 }, 
}