将介绍 Vue.js 中怎样通过 Prop 传递值，传值又分为静态传值和动态传值。涉及知识点：
传递一个数字
传递一个布尔值
传递一个数组
传递一个对象
在前面的章节，我们已经知道了可以像这样给 prop 传入一个静态的值，例如：
<article-item title="Vue.js 教程"></article-item>
你也知道 prop 可以通过 v-bind 动态赋值，例如：
<!-- 动态赋予一个变量的值 --> <article-item v-for="article in articles" v-bind:key="article.id" v-bind:title="article.title"></article-item> <!-- 动态赋予一个复杂表达式的值 --> <article-item v-for="article in articles" v-bind:key="article.id" v-bind:title="article.title + 'count:' + article.count"></article-item>
在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <article-item v-bind:likes="42"></article-item> <!-- 用一个变量进行动态赋值。--> <article-item v-bind:likes="post.likes"></article-item>
<!-- 包含该 prop 没有值的情况在内，都意味着 `true` --> <article-item is-published></article-item> <!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串 --> <article-item v-bind:is-published="false"></article-item> <!-- 用一个变量进行动态赋值 --> <article-item v-bind:is-published="post.isPublished"></article-item>
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串 --> <article-item v-bind:comment-ids="[234, 266, 273]"></article-item> <!-- 用一个变量进行动态赋值 --> <article-item v-bind:comment-ids="post.commentIds"></article-item>
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串 -->
<article-item
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></article-item>
<!-- 用一个变量进行动态赋值 -->
<article-item v-bind:author="post.author"></article-item>如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：
post: {
id: 1,
title: 'My Journey with Vue'
}下面的模板：
<article-item v-bind="post"></article-item>
等价于：
<article-item v-bind:id="post.id" v-bind:title="post.title"></article-item>
川公网安备51010802032098
