1、$emit的使用場景

子元件呼叫父元件的方法並傳遞資料 注意：子元件標籤中的時間也不區分大小寫要用“-”隔開

子元件：

<template>
  <button @click="emitEvent">點選我</button>
</template>
<script>
  export default {
    data() {
      return {
        msg: "我是子元件中的資料"
      }
    },
    methods: {
      emitEvent(){
        this.$emit
 
('my-event', this.msg)
        //通過按鈕的點選事件觸發方法，然後用$emit觸發一個my-event的自定義方法，傳遞this.msg資料。
      }
    }
  }
</script>

父元件：

<template>
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    <!--父元件中通過監測my-event事件執行一個方法，然後取到子元件中傳遞過來的值-->
  </div>
</template>
 

<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg){
          console.log('接收的資料--------->'+msg)//接收的資料--------->我是子元件中的資料
      }
    }
  }
</script>

2、$refs的使用場景

父元件呼叫子元件的方法，可以傳遞資料 注意：子元件標籤中的時間也不區分大小寫要用“-”隔開

父元件：

<template>
  <div id="app">
    <child-a ref="child"></child-a>
    <!--用ref給子元件起個名字-->
    <button @click="getMyEvent">點選父元件</button>
  </div>
</template>
<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    data() {
      return {
        msg: "我是父元件中的資料"
      }
    },
    methods: {
      getMyEvent(){
          this.$refs.child.emitEvent(this.msg);
          //呼叫子元件的方法，child是上邊ref起的名字，emitEvent是子元件的方法。
      }
    }
  }
</script>

子元件：

<template>
  <button>點選我</button>
</template>
<script>
  export default {
    methods: {
      emitEvent(msg){
        console.log('接收的資料--------->'+msg)//接收的資料--------->我是父元件中的資料
      }
    }
  }
</script>

3、$on的使用場景

兄弟元件之間相互傳遞資料

• 首先建立一個vue的空白例項（兄弟間的橋樑）

      import Vue from 'vue'
    	export default new Vue()
  

• 子元件 childa 傳送方使用 $emit 自定義事件把資料帶過去

  <template>
      <div>
          <span>A元件->{{msg}}</span>
          <input type="button" value="把a元件資料傳給b" @click ="send">
      </div>
  </template>
  <script>
  import vmson from "../../../util/emptyVue"
  export default {
      data(){
          return {
              msg:{
              	a:'111',
              	b:'222'
              }
          }
      },
      methods:{
          send:function(){
              vmson.$emit("aevent",this.msg)
          }
      }
  }
  </script>
  

• 子元件 childb 而接收方通過 $on監聽自定義事件的callback接收資料

  <template>
   <div>
      <span>b元件,a傳的的資料為->{{msg}}</span>
   </div>
  </template>
  <script>
  	  import vmson from "../../../util/emptyVue"
  	  export default {
  		 data(){
  		        return {
  		            msg:""
  		        }
  		    },
  		 mounted(){
  		        vmson.$on("aevent",(val)=>{//監聽事件aevent，回撥函式要使用箭頭函式;
  		            console.log(val);//列印結果：我是a元件的資料
  		            this.msg = val;
  		        })
  		  }
  	}
  </script>
  

• 父元件：

  <template>
       <div>
        <childa></childa>	
        <br />
        <childb></childb>  	
       </div>
  </template>
  <script>
     import childa from './childa.vue';
     import childb from './childb.vue';
     export default {
     	components:{
     		childa,
     		childb
     	},
     	data(){
     		return {
     			msg:""
     		}
     	},
     	methods:{
     		
     	}
     }
  </script>