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

Question

我正在创建一个新的共享组件，我想知道在哪里更好地声明道具，要么在数据函数上，要么就在导出默认对象内。还想知道彼此之间的主要区别是什么

示例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插件添加到您的构建中，并使用推荐的规则来捕获任何看起来不寻常的东西。它将教您如何通过输出错误来编写统一的Vue代码，每当您做一些通常没有完成的事情时。

Answer 2

来自其他堆栈问题：

属性是从父组件传播和管理的，而数据是组件内部状态(组件负责的)。

据我所知，这个概念是从反应中提取的，而且效果很好。https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

现在取决于您的变量是取决于父变量还是它们是独立于其他数据的。

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