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的{{1}}州对象中设置“默认”值的社区做法是什么，因此我们都可以拥有动态props对象，并保留{{1如果我们需要它？

并且相关：如果将state传递给props，我应该在我的组件内部添加到props吗？或者将我的所有动态值设为计算版本，并在每次调用它时考虑v-bind？

感谢您的反馈。

Answer 1

如果您的商家名称存在冲突，Vue会发出警告。例如，如果您在组件中有这个：

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

你会收到这个警告：

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

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

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

在您的示例中，您传递名为data的道具并使用它来设置Vue组件的数据属性。因此，该组件可以访问this.label，this.icon等，并且还可以访问this.data.label，this.data.icon等。

这不会覆盖任何内容，因为名为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 }, 
}

Vue.js道具，组件＆amp;数据名称空间

1 个答案: