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

1. <add v-bind:子组件的值="父组件的属性"></add>  
2. 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的值