如代码
<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属性（那样只能单项绑定，且修改子组件的值后会失去绑定）
