首页 > 建站教程 > 前端框架 >  vue中$refs, $emit, $on, $once, $off的使用,vue事件总线eventBus正文

vue中$refs, $emit, $on, $once, $off的使用,vue事件总线eventBus

vue中$refs, $emit, $on, $once, $off的使用详解，eventBus事件总线的用法。其实$refs和另外几个有本质的区别，其他几个都与数据传递或事件有关，而$refs则是选择节点。但这里也放到一起了。本例根据网上的示例，进行了补全，将$once, $off也加入了进来。

1.$refs的使用场景
父组件调用子组件的方法，可以传递数据。

父组件： 
<div id="app">
  <child-a ref="child"></child-a>
  <button @click="getMyEvent">点击父组件</button>
<div>

<script>
  import ChildA from './child.vue'
 
  export default{
    components:{
      ChildA
    },
    data(){
      return {
        msg:'我是父组件的数据'
      }
    },
    methods:{
      getMyEvent(){
        //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
        this.$refs.child.emitEvent(this.msg)
      }
    }
  }
</script>
子组件： 
<template>
  <button>点击我</button>
</template>
<script>
  export default{
    methods:{
      emitEvent(msg){
        console.log('接收的数据------'+msg)
      }
    }
  }
</script>
2.$emit的使用
子组件调用父组件的方法并传递数据。

子组件： 
<template>
  <button @click="emitEvent">点击我</button>
</template>
<script>
  export default{
    data(){
      return{
        msg:'我是子组件的数据'
      }
    },
    methods:{
      emitEvent(){
        //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
        this.$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 './child.vue';
  export default {
    components:{
      childA
    },
    methods:{
      getMyEvent(msg){
       console.log('接收数据---'+msg);
       //接收数据，我是子组件的数据
      }
    }
  }
</script>
3.事件总线eventBus的使用场景：兄弟组件之间相互传递数据

Ⅰ 创建事件总线：
首先创建一个Vue的空白实例，可以单独放在eventbus.js中（兄弟组件的桥梁）： 
import Vue from 'vue'
export const eventBus = new Vue()
window.eventBus = eventBus
也可以这样做，放在main.js中 
Vue.prototype.$eventBus = new Vue()
Ⅱ 子组件A:发送方使用$emit自定义事件把数据带过去 
<template>
  <div>
    <span>A组件-{{msg}}</span>
    <input type="button" value="把A组件数据传递给B" @click="send">
  </div>
</template>
<script>
  import eventBus from './eventBus';
  export default{
    data(){
      return{
        msg:{
          a:'111',
          b:'222'
        }
      }
    },
    methods:{
      send(){
        //① 在main.js定义后的用法：
        //this.$eventBus.$emit('aevent',this.msg)
        //② eventBus文件导入的用法：
        eventBus.$emit('aevent',this.msg)
      }
    }
  }
</script>
Ⅲ 子组件B:接收方通过$on监听自定义事件的callback接收数据 
<template>
  <div>
    <span>B组件，A传的数据为--{{msg}}</span>
  </div>
</template>
<script>
  import eventBus from './eventBus'
  export default {
    data(){
      return{
        msg:''
      }
    },
    mounted(){
        //① 在main.js定义后的用法：
        //this.$eventBus.$on('aevent',(val)=>{//监听事件aevent，回调函数要使用箭头函数。
        //    console.log(val);//打印结果；我是a组件的数据。
        //在生命周期结束时，销毁监听（$once 'hook:beforeDestroy' 方法不用进生命周期 beforeDestroy，也能在VUE生命周期结束前调用
        //    this.$once('hook:beforeDestroy', () => {
        //        this.$eventBus.$off('aevent')
        //    })
        //})
        //② eventBus文件导入的用法：
        eventBus.$on('aevent',(val)=>{//监听事件aevent，回调函数要使用箭头函数。
            console.log(val);//打印结果；我是a组件的数据。
            //在生命周期结束时，销毁监听（$once 'hook:beforeDestroy' 方法不用进生命周期 beforeDestroy，也能在VUE生命周期结束前调用
            this.$once('hook:beforeDestroy', () => {
                eventBus.$off('aevent')
            })
        })
    },
}
</script>
Ⅳ 父组件： 
<template>  
  <div>
    <childa></childa>
    <br/>
    <childb></childb>
  </div>
</template>
<script>
  import childa from './childa.vue';
  import childb from './childb.vue';
  export default{
    componets:{
      childa,
      childb
    },
    data(){
      return{
        msg:''
      }
    }
  }
</script>

TAGS: vue  $refs  $emit  $on  $once  $off  eventB