1. 程式人生 > >vue裡面v-bind和Props 利用props繫結動態資料

vue裡面v-bind和Props 利用props繫結動態資料

  1. <add v-bind:子元件的值="父元件的屬性"></add>
    1. <divid="app">
    2.     <addv-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的值