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

李文楊發表於2017-07-28
Vue.js元件

本篇文章是我參考官方文件整理的,供大家參考,高手勿噴!

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>

效果是無論你改哪一個的值，另外一個都會隨之變動。

 

相關文章