Vue中this.$emit和this.$on的使用

更新時間：2024年03月24日 10:07:43 作者：易安sparkle

這篇文章主要介紹了Vue中this.$emit和this.$on的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1、解決第一次監(jiān)聽不到數據的方法

this.$nextTick()

this.$nextTick(function () {
     this.$bus.$emit("yulan", row); 
 })

setTimeout

setTimeout(() => {
     //row 代表要傳遞的參數數據
     this.$bus.$emit("yulan", row); 
}, 100);

2、子組件傳值給父組件

子組件中使用$emit觸發(fā)事件的值傳出去，父組件通過事件監(jiān)聽，獲取數據；

兩種情況

由子組件中操作何時傳值

（解決：在子組件中定義一個click事件觸發(fā)自定義事件$emit，在父組件監(jiān)聽）

// 父組件：parent.vue
<template>
  <div>
    <child @childevent='wathChildEvent'></child>
    <div>子組件的數據為：{{msg}}</div>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(val){//直接監(jiān)聽 又子組件觸發(fā)的事件，參數為子組件的傳來的數據
      console.log(val);   //子組件的數據，將有子組件操作觸發(fā)傳給父組件
      this.msg = val;
    } 
  }
}
</script>

// 子組件：child.vue
<template>
  <div><input type="button" value="子組件觸發(fā)" @click="target"></div>
</template>
<script>
export default {
  data(){
      return {
          texts:'這是子組件的數據，將有子組件操作觸發(fā)傳給父組件'
      }
  },
  methods:{
    target:function(){ //有子組件的事件觸發(fā) 自定義事件childevent
      this.$emit('childevent',this.texts);//觸發(fā)一個在子組件中聲明的事件 childEvnet
    }
  },
}
</script>

由父組件中操作何時傳值

（解決：在父組件中第一一個click點擊事件，在組件中通過refs獲取實例方法來直接觸發(fā)事件,然后在父組件中監(jiān)聽）

// 父組件：parent.vue
<template>
  <div>
    <child @childevent='wathChildEvent' ref="childcomp"></child>
    <input type="button" @click="parentEnvet" value="父組件觸發(fā)" />
    <div>子組件的數據為：{{msg}}</div>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(val){//直接監(jiān)聽 又子組件觸發(fā)的事件，參數為子組件的傳來的數據
      console.log(val);//子組件的數據，將有子組件操作觸發(fā)傳給父組件
      this.msg = val;
    },
    parentEnvet:function(){
      this.$refs['childcomp'].target(); //通過refs屬性獲取子組件實例，又父組件操作子組件的方法觸發(fā)事件$meit
    }
  }
}
</script>

// 子組件：child.vue
<template>
  <div> dothing </div>
</template>
<script>
export default {
  data(){
      return {
          texts:'這是子組件的數據，將有子組件操作觸發(fā)傳給父組件'
      }
  },
  methods:{
    target:function(){ //又子組件的事件觸發(fā) 自定義事件childevent
      this.$emit('childevent',this.texts);//觸發(fā)一個在子組件中聲明的事件 childEvnet
    }
  },
}
</script>

3、兄弟組件間傳值

傳遞數據方–發(fā)射事件

通過事件傳遞$emit(方法名，傳遞的數據)

接收數據方–監(jiān)聽事件

在mounted()中觸發(fā)$on(方法名，callback(接收數據的數據))

// 建立一個空的Vue實例,將通信事件掛載在該實例上
// emptyVue.js
import Vue from 'vue'
export default new Vue()

// 兄弟組件a:childa.vue
<template>
  <div>
    <span>A組件->{{msg}}</span>
    <input type="button" value="把a組件數據傳給b" @click ="send">
  </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
  data(){
    return {
      msg:"我是a組件的數據"
    }
  },
  methods:{
    send:function(){
      vmson.$emit("aevent",this.msg)
    }
  }
}
</script>

// 兄弟組件b:childb.vue
<template>
   <div>
    <span>b組件,a傳的的數據為->{{msg}}</span>
  </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
 data(){
    return {
      msg:""
    }
  },
  mounted(){
    vmson.$on("aevent",(val)=>{//監(jiān)聽事件aevent，回調函數要使用箭頭函數;
      console.log(val);//打印結果：我是a組件的數據
      this.msg = val;
    })
  }
}
</script>

// 父組件：parent.vue
<template>
  <div>
    <childa><childa>
    <childb></childb>
  </div>
</template>
<script>
import childa from "./childa";
import childb from "./childb";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    childa,
    childb
  },
}
</script>