如下所示:
<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的函數(shù)中返回值被覆蓋了。
【3】也就是說,使用v-bind的是使用父組件的值(根據(jù)屬性名),沒有使用v-bind的是將標(biāo)簽里的數(shù)值當(dāng)做字符串來使用。
【4】依然需要使用props,否則他會取用自己data里的btn的值
以上這篇vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選