Vue學習小札——2.4 父子元件間的資料傳遞

weixin_33806914發表於2018-05-28
Vue元件

父元件向子元件傳遞資料——父元件通過屬性的形式向子元件傳遞資料

子元件通過props形式接受父元件傳來的資料。

<body>
  <div id="app">
    <counter :count="0"></counter>
    <counter :count="1"></counter>
  </div>
   
  <script>
   var counter = {
    props: ['count'],
    template: '<div>{{count}}</div>',
   };
   var vm = new Vue({
     el: "#app",
     components: {
       counter:counter
     }
   });
  </script>
</body>
複製程式碼

父元件通過屬性的形式向counter子元件傳遞了一個叫count的資料，子元件通過props接受count這個屬性的內容。這樣在子元件的模板裡面就可以直接來使用count。


（單向資料流：父元件可以向子元件傳遞任何資料，子元件不能改變父元件的資料）父元件可以隨意向子元件傳遞引數，子元件絕對不能隨便修改子元件傳遞過來的引數。舉例來說，如果父元件自身有個資料是3，過一會變成4傳給子元件，這是沒有任何問題的。但是，傳給了子元件之後，子元件接受了父元件傳遞過來的內容，子元件只能夠使用這個內容，不能夠去修改這個內容。之所以Vue中有這個單向資料流的概念，原因在於，一旦你的count接受的不是基礎型別的資料，而是類似於object這樣的引用形式的時候，你在子元件裡改變了傳遞過來的資料內容，有可能接受的子元件資料還被其他子元件使用，這樣的話，你這個子元件改變了資料，還可能對其他子元件造成影響。

<body>
  <div id="app">
    <counter ref="one" @change="handleChange" :count="3"></counter>
    <counter ref="two" @change="handleChange" :count="2"></counter>
    <div>{{total}}</div>
  </div>
   
  <script>
   var counter = {
    props: ['count'],
    data: function() {
        return {
          number :this.count
        }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    methods: {
       handleClick: function() {
        this.number++;
        this.$emit('change',1);
       }
    }
   };
   var vm = new Vue({
     el: "#app",
     components: {
       counter:counter
     },
     data: {
      total: 5,
     },
     methods:  {
       handleChange: function() {
           this.total = this.$refs.one.number + this.$refs.two.number;
       }
     } 
   });
  </script>
</body>
複製程式碼

子元件通過事件觸發的形式向父元件傳值。emit（）


相關文章