本文主要對vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸.

主要的傳輸方式有三種：

1.父組件到子組件通信

2.子組件到父組件的通信

3.兄弟組件之間的通信

一、父組件傳值給子組件

父組件給子組件傳子，使用props

//父組件：parent.vue<template>  <div>    <child :vals = "msg"></child>  </div></template><script>import child from "./child";export default {  data(){    return {      msg:"我是父組件的數(shù)據(jù)，將傳給子組件"    }  },  components:{    child  }}</script>//子組件：child.vue<template>  <div>    {{vals}}  </div></template><script>export default {   props:{ //父組件傳值 可以是一個(gè)數(shù)組，對象    vals:{      type:String,//類型為字符竄     default:"123" //可以設(shè)置默認(rèn)值    }  },}</script>

2.子組件到父組件的通信

使用 $emit(eventname,option) 觸發(fā)事件,

參數(shù)一：自定義事件名稱，寫法,小寫或者用-連接，如event,event-name 不能寫駝峰寫法(eventName)

子組件給父組件傳值，可以在子組件中使用$emit觸發(fā)事件的值傳出去,父組件通過事件監(jiān)聽，獲取數(shù)據(jù)

但是，這里有一個(gè)問題，

1、究竟是由子組件內(nèi)部主動傳數(shù)據(jù)給父組件，由父組件監(jiān)聽接收（由子組件中操作決定什么時(shí)候傳值）

2、還是通過父組件決定子組件什么時(shí)候傳值給父組件，然后再監(jiān)聽接收 （由父組件中操作決定什么時(shí)候傳值）

兩種情況都有

2.1 : $meit事件觸發(fā),通過子組件內(nèi)部的事件觸發(fā)自定義事件$emit

2.2 : $meit事件觸發(fā)， 可以通過父組件操作子組件 (ref)的事件來觸發(fā) 自定義事件$emit

第一種情況：

//父組件：parent.vue<template>  <div>    <child v-on:childevent='wathChildEvent'></child>    <div>子組件的數(shù)據(jù)為：{{msg}}</div>  </div></template><script>import child from "./child";export default {  data(){    return{      msg:""    }  },  components:{    child  },  methods:{    wathChildEvent:function(vals){//直接監(jiān)聽 又子組件觸發(fā)的事件，參數(shù)為子組件的傳來的數(shù)據(jù)      console.log(vals);//結(jié)果：這是子組件的數(shù)據(jù)，將有子組件操作觸發(fā)傳給父組件      this.msg = vlas;    }   }}</script>//子組件：child.vue<template>  <div>    <input type="button" value="子組件觸發(fā)" @click="target">  </div></template><script>export default {  data(){      return {      texts:'這是子組件的數(shù)據(jù)，將有子組件操作觸發(fā)傳給父組件'      }  },  methods:{    target:function(){ //有子組件的事件觸發(fā) 自定義事件childevent      this.$emit('childevent',this.texts);//觸發(fā)一個(gè)在子組件中聲明的事件 childEvnet    }  },}</script>