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收到的原始值吗？

什么是在来自props的data状态对象中设置“默认”值的社区实践，因此我们都可以拥有动态state对象，并在必要时保留props ？

并且相关：如果使用v-bind传递props ，我应该将它们添加到我的组件内部watch吗？ 或者让我的所有动态值都是一个计算版本，每次调用时都考虑到props ？

感谢您的反馈。

Answer 1

如果您的财产名称有冲突，Vue会发出警告。 例如，如果您在组件中有此：

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

你会得到这个警告：

[Vue警告]：数据属性“foo”已经被声明为prop。 请改用prop默认值。

并且（正如警告所暗示的那样），如果你想设置一个道具的默认值，你应该在道具的定义中这样做：

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

---

在您的示例中，您传递一个名为data的prop，并使用它来设置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 }, 
}