vue中的props对象

1.props对象的定义

props其实是properties的缩写，props对象是用来定义属性的。props对象可以接受数组形式的参数又或者是对象形式的参数。

数组形式

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

对象形式

在对象形式中，可以指定该属性的类型，这些 property 的名称和值分别是 prop 各自的名称和类型。

props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object,callback: Function,contactsPromise: Promise // or any other constructor
}

2.关于属性的命名方法 (驼峰命名法)

根据官方解释，HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'
})

在HTML中使用给组件的属性赋值时就需要这样：

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

这个官方案例可以很清晰得看到postTitle------>post-title

3. props值的传递

这个很容易理解，props中对应的属性是对应HTML中的attribute变量的，所以我们可以这样传递值：

<!--这样直接赋值-->
<blog-post title="My journey with Vue"></blog-post><!--也可以通过v-bind绑定赋值-->
<blog-post v-bind:title="data"></blog-post>

4.组件间数据的传递

props经常用来将父组件的数据传递到子组件，这个实现十分简单，就是通过v-bind绑定属性在将父组件中的数据传递到子组件中。

下面代码或许有点乱，但没关系，我一步步解读：

定义了一个父组件father-node，并且data中定义一个名为count的数据。
定义了一个子组件child-node，在props中定义了一个count属性。
在父组件的模板中我们使用了子组件child-node，并通过v-bind将father-node中名为count的数据传递给了child-node的count属性。
然后，我们将child-node的count属性值赋给了child-node的data中的child-count数据，并进行了展示。
数据流长这样：父组件的data------->子组件的props--------->子组件的data

<script>Vue.component("father-node",{template:'<div><child-node :count="count"></child-node></div>',//一个父组件数据countdata:function(){return{count:0}},component:{'child-node':{template:'<p>来自父组件的count:{{child-count}}</p>',props:['count'],data:{function{return {child-count:this.count}}}}}})
</script>

为什么这样传呢？

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。