vue中的props對象

1.props對象的定義

props其實是properties的縮寫，props對象是用來定義屬性的。props對象可以接受數(shù)組形式的參數(shù)又或者是對象形式的參數(shù)。

數(shù)組形式

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.關(guān)于屬性的命名方法 (駝峰命名法)

根據(jù)官方解釋，HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 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中對應(yīng)的屬性是對應(yīng)HTML中的attribute變量的，所以我們可以這樣傳遞值：

<!--這樣直接賦值--> <blog-post title="My journey with Vue"></blog-post><!--也可以通過v-bind綁定賦值--> <blog-post v-bind:title="data"></blog-post>

4.組件間數(shù)據(jù)的傳遞

props經(jīng)常用來將父組件的數(shù)據(jù)傳遞到子組件，這個實現(xiàn)十分簡單，就是通過v-bind綁定屬性在將父組件中的數(shù)據(jù)傳遞到子組件中。

下面代碼或許有點亂，但沒關(guān)系，我一步步解讀：

定義了一個父組件father-node，并且data中定義一個名為count的數(shù)據(jù)。

定義了一個子組件child-node，在props中定義了一個count屬性。

在父組件的模板中我們使用了子組件child-node，并通過v-bind將father-node中名為count的數(shù)據(jù)傳遞給了child-node的count屬性。

然后，我們將child-node的count屬性值賦給了child-node的data中的child-count數(shù)據(jù)，并進(jìn)行了展示。

數(shù)據(jù)流長這樣：父組件的data------->子組件的props--------->子組件的data

<script>Vue.component("father-node",{template:'<div><child-node :count="count"></child-node></div>',//一個父組件數(shù)據(jù)countdata:function(){return{count:0}},component:{'child-node':{template:'<p>來自父組件的count:{{child-count}}</p>',props:['count'],data:{function{return {child-count:this.count}}}}}}) </script>

為什么這樣傳呢？

每次父級組件發(fā)生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應(yīng)該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

總結(jié)

以上是生活随笔為你收集整理的vue中的props对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。