Vue中的props理解

Vue组件

Vue实例中的data属性是一个对象，然而组件中的data属性是一个函数。这是因为一个组件可以在同一个页面上被多次引用，你大概不希望他们共享一个data对象（因为同一个组件的每个实例的data属性是同一个对象的引用，当该组件的某个实例修改了自身的data属性，相当于所有组件的data属性都被修改了。）所以组件的data属性应该是一个函数，在组件初始化是Vue会调用这个函数来生成data对象。

方式一

App.vue

方式二

DisplayNumber.vue

App.vue

再看另外一个例子：
App.vue

结果：

image.png

Style的使用

DisplayNumber.vue

注册props：

1. 定义props为一个string数组，数组中的每一个元素对应一个props名字；
2. 定义props为一个object，每一个key对应一个props名字。
   props为单向的数据绑定。一个component永远不要修改它自己的props。原因是，这会使调试难度增加，如果某个value传给了它的多个children组件，很难跟踪到这个值的变化来自哪里。另外，改变props会导致该组件被重复刷新。
   组件中的data属性是一个function，而不是object；
   data属性不要使用箭头函数（arrow function）。

v-bind

将Javascript表达式（Javascript expression）和HTML 元素和组件（HTML elements and components）绑定起来。

v-bind:attribute="expression"

在大多数时候，可以简写为：

:attribute="expression"

看例子：

Prop 的大小写 (camelCase vs kebab-case)

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
在HTML中通过kebab-case形式指定的属性，会在组件内部自动转换为camelCase 形式。我们不需要作任何额外的处理，这种转换会自动完成。