给组件传递属性的方式

本节目标：理解“给组件传递属性的方式”的核心思路，并能把它用于实际开发或面试表达。 直接传值 一、不使用v-bind传递，表示值为字符串值，而v-bind表示值为表达式或变量。

<blog-post title="My journey with Vue"></blog-post>

二、如果传递的布尔值始终为true，也可不使用v-bind。 \<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。

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

三、其它值类型：

v-bind:属性="对象"，这种形式表示将对象赋值给相应属性； v-bind="对象"，这种形式表示传递的对象的键名为对应的属性名，键值为对应属性的值。即将多个组件的属性通过一个对象同时传递。

v-bind:属性="数组"，这种形式表示将数组赋值给相应属性；

\<!-- 动态赋予一个变量的值

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

动态赋予一个复杂表达式的值

 --><blog-post  v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

通过表达式或变量传值 只能使用V-bind传递，表达式或变量的值可以为：

举例：数字\<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉

 Vue --><!--

这是一个 JavaScript 表达式而不是一个字符串。

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

用一个变量进行动态赋值。

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

传入一个布尔值\<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉

 Vue --><!--

这是一个 JavaScript 表达式而不是一个字符串。

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

用一个变量进行动态赋值。

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

传入一个数组\<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉

 Vue --><!--

这是一个 JavaScript 表达式而不是一个字符串。

--><blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!--

用一个变量进行动态赋值。

--><blog-post v-bind:comment-ids="post.commentIds"></blog-post>

传入一个对象\<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉

 Vue --><!--

这是一个 JavaScript 表达式而不是一个字符串。

--><blog-post  v-bind:author="{    name: 'Veronica',    company: 'Veridian Dynamics'  }"></blog-post>
<!--

用一个变量进行动态赋值。

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

传入一个对象的所有 property 如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代

v-bind:prop-name)

。例如，对于一个给定的对象 post：

post: {  id: 1,  title: 'My Journey with Vue'}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

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

给组件传递属性的方式 ​