vue2.0--組件通信(非vuex法)

寫在前面：

1.父組件的data寫法與子組件的data寫法不同

//父組件
data:{
    //對象形式
}

//子組件
data:function(){
  return {
       //函數形式  
   }
}

2.引用子組件遵循 

• 引入組件
• components里定義使用
• 如果有通信，需要在子組件的props注冊

以下實例全部使用以下模板

<div id="app">
   //父組件
    <p>{{total}}</p>
    <mime @increment1="incrementTotal" ref="child" :num-a="total" num-s="total"></mime>
    
    <button type="button" @click="clickref">調用子組件</button>
</div>

//子組件
<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>
<script>
    new Vue({
        el:'#app',
        data :{
            total: 0          
        },
        methods:{
            incrementTotal : function(){
              
            },
            clickref:function(){
              
            }
        },
        components:{
            'mime' :{
                template:'#myInput',
                data : function(){
                    return{
                        counter : 0
                    }
                },
                props:['numA','numS'],
                methods:{
                    add : function(){
                      
                    }
                }
            }
        }
    });
</script>

 

1.父子通信 之 靜態數據

如果只是傳單一的字符串 

<mime num-s="total"></mime>

....

props:['numS'] // numS  為字符串 total

這樣子組件的numS一直為total。但這種太不靈活

 

2.父子通信 之 動態數據

父組件的數據將會動態傳遞給子組件

<input v-model="total">
<mime :num-a="total"></mime>

....

//props:['numA']

props:{
   numA:[ String , Number ]  //允許字符串 數字
}

這時當input輸入什么，子組件的numA將會得到什么

 

3.父子通信 之 子調用父

{{total}}
<mime @increment="incrementTotal"></mime>

<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>

...
<script>
....
data:{
   tatal: 0
},
methods:{
   incrementTotal:function(){
       this.total +=1;
   }
},
components:{
   data : function(){
       return:{
          counter : 0
       }
   },
    methods : {
        add : function(){
             this.counter +=1;
             this.$emit('increment'); //子組件通過 $emit觸發父組件的方法 increment   還可以傳參   this.$emit('increment' ,this.counter);
        }
   }
}
</script>

子組件執行add --> 觸發$emit --> 觸發父組件increment --> 執行 incrementTotal 方法

 

4.父子通信 之 父調用子

<mime ref="child"></mime>
<button type="button" @click="clickref">調用子組件</button>

<template id="myInput">
    <button @click="add">{{counter}}</button>
</template>

...
<script>
....

methods:{
   clickref:function(){
          var child = this.$refs.child; //獲取子組件實例
          child.counter = 45;           //改變子組件數據
          child.add(11);                //調用子組件方法 add
       }
},
components:{
   data : function(){
       return:{
          counter : 0
       }
   },
    methods : {
        add : function(num){
             this.counter +=1;
             console.log('接受父組件的值：',num) //num為11
        }
   }
}
</script>

通過在子組件上引用ref,從而獲得子組件實例，進行相應操作。

 

5.子組件與子組件通信

官網：在簡單的場景下，使用一個空的 Vue 實例作為中央事件總線

var bus = new Vue()

// 觸發組件 A 中的事件
bus.$emit('id-selected', 1)

// 在組件 B 創建的鈎子中監聽事件
bus.$on('id-selected', function (id) {
// ...
})

但是這樣實在太麻煩了，建議使用vuex