Vue.js 道具、组件和数据命名空间答案

【问题标题】：Vue.js props, components & data namespaceVue.js 道具、组件和数据命名空间
【发布时间】：2017-09-02 21:17:58
【问题描述】：

当我有一个 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 中是如何工作的？是否将 props 键、数据返回对象键和所有组件对象键都添加到 this 实例中？是否没有错误/覆盖内容的风险？

那么，如果我覆盖 this.data，我还能读取在 props 中收到的原始值吗？

在来自props 的data 状态对象中设置“默认”值的社区实践是什么，这样我们既可以拥有一个动态的state 对象，又可以保留props 以备不时之需?

和相关：如果通过props 和v-bind 我应该在我的组件内部将它们添加到watch 吗？还是将我所有的动态值作为计算版本，每次调用时都考虑到props？

感谢您的反馈。

【问题讨论】：

>>相关：如果通过 v-bind 传递道具，我应该将它们添加到我的组件内部观看吗？还是让我所有的动态值成为计算版本，每次调用时都会考虑道具？>>第二个。 Props 是响应式的：当传入的 prop 更新时，组件的属性也会更新。

标签： javascript vue.js

【解决方案1】：

如果您的属性名称有冲突，Vue 会警告您。例如，如果你的组件中有这个：

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

您会收到以下警告：

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

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

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

在您的示例中，您传递了一个名为 data 的道具，并使用它来设置 Vue 组件的数据属性。所以组件可以访问this.label、this.icon等，也可以访问this.data.label、this.data.icon等。

这不会覆盖任何内容，因为名为 data 的 prop 引用的对象与组件的数据属性不同。但是，您可能永远不想将属性命名为 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 }, 
}

【讨论】：