vue.js學習筆記（Vuejs——組件——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>

渲染結果是：

2個按鈕，第一個的值是123，第二個的值是456

 

②使用props綁定靜態數據：

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

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

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

<div id="app">  
    <add 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> 

這種寫法下，btn的值是h，而不是123，或者是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綁定動態數據：

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

<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>

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

【4】props驗證：

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

 

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

例如：

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

驗證test這個變量是不是雙向綁定，如果不是，則報錯。（注意，這個不能用於驗證單向綁定）。

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