Vuejs——(9)組件——props數據傳遞

(二十六)props數據傳遞

①組件實例的作用域:

是孤立的,簡單的來說,組件和組件之間,即使有同名屬性,值也不共享。

渲染結果是:

2個按鈕,第一個的值是123,第二個的值是456(雖然他們都是btn)

②使用props綁定靜態數據:

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

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

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

示例代碼:


<script>
var vm = new Vue({
el: '#app',
data: {
h: “hello”
},
components: {
“add”: {
props: ['btn'],
template: ““,
data: function () {
return {btn: “123”};
}
}
}
});
</script>

這種寫法下,btn的值是h,而不是123,或者是hello。

【4】駝峰寫法

假如插值是駝峰式的,

而在html標簽中,由於html的特性是不區分大小寫(比如LI和li是一樣的),因此,html標簽中要傳遞的值要寫成短橫線式的(如btn-test),以區分大小寫。

而在props的數組中,應該和插值保持一致,寫成駝峰式的(如btnTest)。

例如:

props: ['btnTest'],
template: "",

 

正確的寫法:


假如插值寫短橫線式,或者是html標簽寫成駝峰式,都不能正常生效。(除非插值不寫成駝峰式——跳過大小寫的限制,才可以)

 

 

③利用props綁定動態數據:

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

標準寫法是(利用v-bind):

如代碼


<script>
var vm = new Vue({
el: '#app',
data: {
h: “hello”
},
components: {
“add”: {
props: ['btn'],
template: ““,
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}看做是一個對象);

如代碼:


<script>
var vm = new Vue({
el: '#app',
data: {
h: “hello”
},
components: {
“add”: {
props: ['btn'],
template: “
}
}
});
</script>

這裡的btn的值是3(而不是沒有加v-bind時,作為字符串的1+2)

⑤props的綁定類型:

【1】簡單來說,分為兩種類型,即單向綁定(父組件能影響子組件,但相反不行)和雙向綁定(子組件也能影響父組件);

【2】單向綁定示例:(默認,或使用.once)

說明:

當父組件的值被更改後,子組件的值也隨之更改;

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

另外需要註意的是,子組件如果要同步綁定,那麼子組件的input需要是v-model,而不能是value屬性(那樣隻能單項綁定,且修改子組件的值後會失去綁定)

【3】雙向綁定:

需要使用“.sync”作為修飾詞

如示例:

<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
“test”: {
props: ['test'],
template: “”
}
}
});
</script>

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

 

【4】props驗證:

簡單來說,當組件獲取數據時,進行驗證,隻有符合條件的時候,才會使用之。

寫法是將props變為一個對象,被驗證是值是對象的key,驗證條件是和key對應的value。

例如:

props: {
    test: {
        twoWay: true
    }
},

驗證test這個變量是不是雙向綁定,如果不是,則報錯。(註意,這個不能用於驗證單向綁定)。

示例代碼如下:

子組件:

發佈留言