Vue.js 教程

Vue.js Prop 传递值

将介绍 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>
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号