vue.js使用props在父子組件之間傳參

本篇文章是我參考官方文檔整理的,供你們參考,高手勿噴!

prop

組件實例的做用域是孤立的。這意味着不能 (也不該該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，咱們須要經過子組件的 props 選項。

子組件要使用 props選項聲明它期待得到的數據

官方的解釋很是清晰了:二者之間須要有一個通信工具才能夠獲取到對方的數據,props就是這個通信工具,而且在通信時須要說明我想獲得什麼數據;

先從組件之間的做用域提及

<div id="app"> 
<add></add> 
<del></del> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
components: { 
"add": { 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
}, 
del: { 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {btn: "456"}; 
} 
} 
} 
}); 
</script>

在這段代碼裏:第一個的值是123，第二個的值是456（雖然他們都是btn）但因爲做用域不一樣,因此不會互相影響

如何使用props綁定靜態數據：

【1】這種方法用於傳遞字符串，且值是寫在父組件自定義元素上的。

<add btn="h"></add> 

【2】下面示例中的寫法，不能傳遞父組件data屬性中的值

【3】會覆蓋模板的data屬性中，同名的值。

<div id="app"> 
<add btn="name"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
name: "hello"
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
} 
} 
}); 
</script>

這種寫法下，btn的值是name，而不是hello。

【4】駝峯寫法

假如插值是駝峯式的，

而在html標籤中，因爲html的特性是不區分大小寫（好比LI和li是同樣的），所以，html標籤中要傳遞的值要寫成短橫線式的（如btn-test），以區分大小寫。

而在props的數組中，應該和插值保持一致，寫成駝峯式的（如btnTest）。

例如：

props: ['btnTest'], 
template: "<button>btn：{{btnTest}}</button>",

正確的寫法：

<add btn-test="h"></add>

假如插值寫短橫線式，或者是html標籤寫成駝峯式，都不能正常生效。（除非插值不寫成駝峯式——跳過大小寫的限制，才能夠）

利用props綁定動態數據：

簡單來講，就是讓子組件的某個插值，和父組件的數據保持一致。

標準寫法是（利用v-bind）：

<add v-bind:子組件的值="父組件的屬性"></add>

如代碼

<div id="app"> 
<add v-bind:btn="h"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
h: "hello"
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {'btn': "123"}; //子組件同名的值被覆蓋了 
} 
} 
} 
}); 
</script>

說明：

【1】btn使用的父組件data中 h的值；

【2】子組件的data的函數中返回值被覆蓋了。

【3】也就是說，使用v-bind的是使用父組件的值（根據屬性名），沒有使用v-bind的是將標籤裏的數值當作字符串來使用。

【4】依然須要使用props，不然他會取用本身data裏的btn的值

字面量和動態語法：

【1】簡單來講，不加v-bind的，傳遞的是字面量，即當作字符串（例如1也是字符串，而不是number類型）；

【2】加上v-bind的，傳遞的是JS表達式（所以才能傳遞父組件的值）；

【3】加上v-bind後，若是能找到父組件的值，那麼使用父組件的值；若是沒有對應的，則將其看作一個js表達式（例如1+2看作3，{a:1}看作是一個對象）；

<div id="app"> 
<add v-bind:btn="1+2"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
h: "hello"
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn：{{btn}}</button>"
} 
} 
}); 
</script>

這裏的btn的值是3（而不是沒有加v-bind時，做爲字符串的1+2）

props的綁定類型：

【1】簡單來講，分爲兩種類型，即單向綁定（父組件能影響子組件，但相反不行）和雙向綁定（子組件也能影響父組件）；

【2】單向綁定示例：（默認，或使用.once）

<div id="app"> 
父組件： 
<input v-model="val"><br/> 
子組件： 
<test v-bind:test-Val="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
"test": { 
props: ['testVal'], 
template: "<input v-model='testVal'/>"
} 
} 
}); 
</script>

說明：

當父組件的值被更改後，子組件的值也隨之更改；

當子組件的值被更改後，父組件的值不會變化，而假如再次修改父組件的值，子組件會再次同步。

另外須要注意的是，子組件若是要同步綁定，那麼子組件的input須要是v-model，而不能是value屬性（那樣只能單項綁定，且修改子組件的值後會失去綁定）

【3】雙向綁定：

須要使用「.sync」做爲修飾詞

如示例：

<div id="app"> 
父組件： 
<input v-model="val"><br/> 
子組件： 
<test :test.sync="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
"test": { 
props: ['test'], 
template: "<input v-model='test'/>"
} 
} 
}); 
</script>

效果是不管你改哪個的值，另一個都會隨之變更。