①元件例項的作用域：
是孤立的，簡單的來說，元件和元件之間，即使有同名屬性，值也不共享。

<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（雖然他們都是btn）

②使用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繫結動態資料：
簡單來說，就是讓子元件的某個插值，和父元件的資料保持一致。

標準寫法是（利用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>  

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

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