vue $emit、$on、$refs簡介

1、$emit

觸發當前實例上的事件。附加參數都會傳給監聽器回調

ex: 子組件調用父組件的方法並傳遞數據
注意：子組件標簽中的時間也不區分大小寫要用“-”隔開

子組件：

<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、$on

兄弟組件之間相互傳遞數據

首先創建一個vue的空白實例（兄弟間的橋梁）

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

子組件 child_a

發送方使用 $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>

子組件 child_b

而接收方通過 $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>

 

 

3、$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>