vue 父组件如何向子组件传值

参考： https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop

从官方文档可以知道组件可以定义的属性的类型几乎涵盖了所有常用的类型，记住这个用于定义属性的时候用

props: {

title: String,

likes: Number,

isPublished: Boolean,

commentIds: Array,

author: Object,

callback: Function,

contactsPromise: Promise // or any other constructor

}

而定义好接收的属性后，接下来就是要如何给这个属性传值：

文档：https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop

里有一一举例，只是中文翻译的表述的不是很清楚，我在这里写下我的理解：

• 传入一个string

1.传静态string，不需要用v-bind
<blog-post title="My journey with Vue"></blog-post>
2.传动态string变量, 需要用v-bind
<blog-post v-bind:title="post.title"></blog-post>
<blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post>

• 传入一个数字

1.传静态数字，需要用v-bind

<blog-post v-bind:likes="42"></blog-post>

2.传动态number变量, 需要用v-bind

<blog-post v-bind:likes="post.likes"></blog-post>

英文版里有一句话用来解释为什么在传动静态的number都要用v-bind 而传静态string就不需要v-bind，只是在中文翻译这句话被截断了，读者容易误解

翻译： 虽然 42是个静态值，但是我们仍需要标注v-bind以便让vue知道 “42” 是一个javascript表达式而不是一个string

• 传入一个布尔值

1.硬性传静态true/false，需要用v-bind， 布尔值true可以特殊处理，当只出现属性名，没有给值的时候，vue会把它当传了true处理

<blog-post v-bind:is-published="false"></blog-post>

<blog-post is-published></blog-post>

2.传动态number变量, 需要用v-bind

<blog-post v-bind:is-published="post.isPublished"></blog-post>

这里一定要用v-bind 的解释同上。

• 传入一个数组

不论传动静态数组都要加v-bind，理由同上。
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

• 传入一个对象

不论传动静态数组都要加v-bind，理由同上。
<blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }" ></blog-post>
<blog-post v-bind:author="post.author"></blog-post>

• 传入一个对象的所有 property

要通过对象名来传一堆属性，那肯定是动态的，肯定要加v-bind,但是这种情况可以省略对方的属性名，前提是这个对象的属性名跟子组件的属性名一致，这样子组件才能解析得到这些属性的值。
例如有个对象：
post: { id: 1, title: 'My Journey with Vue' }
把它的属性都传给blog-post：
<blog-post v-bind="post"></blog-post>

等同于
<blog-post v-bind:id="post.id" v-bind:title="post.title" ></blog-post>