vue里面v-bind和Props 利用props绑定动态数据

1. <div id="app">  
2.     <add v-bind:btn="h"></add>  
3. </div>  
4. <script>  
5.     var vm = new Vue({  
6.         el: '#app',  
7.         data: {  
8.             h: "hello"  
9.         },  
10.         components: {  
11.             "add": {  
12.                 props: ['btn'],  
13.                 template: "<button>btn：{{btn}}</button>",  
14.                 data: function () {  
15.                     return {'btn': "123"};  //子组件同名的值被覆盖了  
16.                 }  
17.             }  
18.         }  
19.     });  
20. </script>  

说明：
 

【1】btn使用的父组件data中 h的值；

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说，使用v-bind的是使用父组件的值（根据属性名），没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props，否则他会取用自己data里的btn的值