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

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