Question

我正在创建一个新的共享组件，我想知道在数据函数上还是在导出默认值对象内部声明 props 的更好的方法。还想知道彼此之间的主要区别

示例1：

export default {
    props: {
      hasColor: {
        type: Boolean,
        default: false
             },
      hasName: {
        type: Boolean,
        default: true
             },
          },
    data () {
        return {
         test: '',
    }
  }

示例2：

 export default {
    data () {
      return {
        props: {
           hasColor: {
             type: Boolean,
             default: false
               },
           hasName: {
             type: Boolean,
             default: true
               }
             }
           }

Answer 1

只有第一个有效。第二个可能会或可能不会，但道具不是数据。甚至不要尝试这样定义它们。

请考虑将Vue eslint plugin添加到您的构建中，并使用建议的规则来捕获似乎与众不同的任何内容。它将教您如何在每次执行通常不执行的操作时输出错误，从而编写统一的Vue代码。

Answer 2

From other stack question:
属性应从父组件传播和管理，而数据是组件内部状态（组件负责）。
据我所知，这个概念来自React，并且效果很好。 https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

现在要看，如果你的变量依赖于父母或他们是独立的基础上的其他数据。

如果不使父组件添加或更改逻辑，但每个组件都不相同，我更喜欢使用道具。

VueJS在共享组件中声明道具的位置

2 个答案: