關於vuejs中的組件通訊

關於vuejs中的組件通訊

在項目中常常會用到vue的組件通訊，可是一直沒總結下。今天稍微不那麼忙，來總結下vue2.0中組件通訊的方法，非vuex。

vue中的組件通訊方式可分爲兩大類，一類是父子組件通訊，一類是兄弟組件通訊。其中第一類又可分爲父組件向子組件通訊和子組件向父組件通訊，關於這一類，vue官網如此描述：

在 Vue 中，父子組件的關係能夠總結爲 prop 向下傳遞，事件向上傳遞。父組件經過 prop 給子組件下發數據，子組件經過自定義事件給父組件發送消息。

父子組件通訊的方法能夠總結爲「props down，events up」。關於兄弟組件通訊的方法經常使用爲eventBus,主要途徑是在要相互通訊的兄弟組件之中，都引入一個新的vue實例，而後經過分別調用這個實例的事件觸發和監聽來實現通訊和參數傳遞。

1. 父子通訊之父傳子

在父組件使用子組件的地方綁定數據，而後在子組件中顯式地用 props 選項聲明它預期的數據。

• 靜態數據

  /父組件father.vue/ //template //javascript import son1 from './son1.vue' export default { data() { return {

  }
      },
      components:{son1},
    }
  複製代碼

  /子組件son1.vue/ //template

  我是子組件son1,這是父組件給個人消息--> {{msg1}}

  //javascript export default { props:['msg1'], }

• 動態數據

  /父組件father.vue/ //template //javascript import son2 from './son2.vue' export default { data() { return { fatherMessage:"小兒子，喊你哥一塊兒回家吃飯了", } }, components:{son2}, }

  /子組件son2.vue/ //template

  我是子組件son2,這是父組件給個人消息--> {{msg2}}

  //javascript export default { props:['msg2'], }

2. 父子通訊之父調用子

利用ref將子組件掛載到父組件的$refs對象上。插一段vuejs官網關於ref的介紹

ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例。

/*父組件father.vue*/
  //template
  <button @click="son1SayHello">讓son1說"hello"</button>
  <son1 ref="son1"></son1
  //javascript
  import son1 from './son1.vue'
  import son2 from './son2.vue'
  export default {
      data() {
          return {
           
          }
      },
      components:{son1,son2},
      methods:{ 
       son1SayHello() {
         //經過在子組件上引用ref,從而得到子組件實例，進行相應操做。
         this.$refs.son1.sayHello()
       }
      }
  }
  
/*子組件son1.vue*/
  //template
  //javascript  
   export default {
	      data() {
	         return { 
	         }
	      },  
	    methods:{
	          sayHello() {
	              alert("hello")
	          }
	    }
    }
複製代碼

3. 父子通訊之子調用父

在子組件中利用$emit觸發一個名爲‘receiveSon2Message’的自定義事件，並將數據出去。而後在父組件中使用子組件的地方利用v-on綁定自定義事件‘receiveSon2Message’，並在自定義事件對應的方法裏操做接收來的數據。

/*子組件son2.vue*/
  //template
   <button @click="sendMessageToFather">和爸爸說"ok"</button>
  //javascript
   export default {
	    data() {
	      return {
	        son2MessageToFather:"ok，爸爸！",
	      }
	    },
	    methods:{
	      sendMessageToFather() {
	        //利用自定義事件在子組件傳遞數據到父組件的流程
	        //點擊子組件中的按鈕（觸發click事件）--> 執行子組件方法sendMessageToFather --> 經過$emit --> 觸發父組件receiveSon2Message事件並傳遞子組件的數據 --> 執行父組件的showMessage方法
	        this.$emit('receiveSon2Message',this.son2MessageToFather)
	      },  
	    }
 }

/*父組件father.vue*/
  //template
   <son2  @receiveSon2Message="showSon2Message"></son2>
  
  //javascript  
  import son1 from './son1.vue'
  import son2 from './son2.vue'
  export default {
      data() {
          return {
              massageFromSon2:''
          }
      },
      components:{son1,son2},
      methods:{
        //最終點擊子組件son2的"和爸爸說ok"按鈕所執行的方法 son2Data是其傳遞過來的數據
        showSon2Message(son2Data) {
          console.log(son2Data);
           this.massageFromSon2 = son2Data;
        },	    
      }
  }
複製代碼

3. 兄弟通訊

利用eventBus,就是先建立一個bus.js，在這js裏面使建立一個空的 Vue 實例做爲中央事件總線

/*bus.js*/
 import Vue from 'vue'
 export  default new Vue();
複製代碼

而後在須要通訊的兄弟組件中引入bus.js ，在主動通訊的組件中用空vue實例的 on方法監聽自定義事件並接收數據。（下例中爲son2組件向son1組件通訊，son2爲主動通訊的組件）

/*兄弟組件son2.vue*/
  //template
   <button @click="sendMessageToBrother">喊哥哥回家吃飯</button>
  //javascript
   import Bus from './bus.js'
   export default {
	    data() {
	      return {
	        son2MessageToBrother:"哥，回家吃飯",
	      }
	    },
	    methods:{
	      sendMessageToBrother() {
	        Bus.$emit('jj', this.son2MessageToBrother);
	      }
	    }
	  } 


/*兄弟組件son1.vue*/
      //template
       <h4>我是子組件son1,這是兄弟組件son2給個人消息--> {{msgFromBrother}}</h4>
      //javascript
      import Bus from './bus.js'
	  export default {
	    data() {
	      return {
	        msgFromBrother:''
	      }
	    },
	    created() {
	      var self = this;
	      Bus.$on('jj', function (data) {
	        console.log(data);
	        self.msgFromBrother = data;
	      });
	    },
	  }
複製代碼