vue中的props對象

1.props對象的定義

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

數組形式

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

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

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

4.組件間數據的傳遞

props經常用來將父組件的數據傳遞到子組件，這個實現十分簡單，就是通過v-bind綁定屬性在將父組件中的數據傳遞到子組件中。

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

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

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

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

然后，我們將child-node的count屬性值賦給了child-node的data中的child-count數據，并進行了展示。

數據流長這樣：父組件的data------->子組件的props--------->子組件的data

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

為什么這樣傳呢？

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。