Vue $emit 和 $on的用法

一、$emit

1、this $emit(‘自定义事件名’,要传送的数据);

2、触发当前实例上的事件,要传递的数据会传给监听器;

二、$on

1、this. o n ( ′ 事 件 名 ′ , c a l l b a c k ) c a l l b a c k 回 调 on('事件名',callback) callback回调 on(,callback)callbackemit要传送的数据;

2、监听当前实例上自定义事件;

三、实例

<html>
  <head>
    <title>$emit 和 $on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <button @click="boost">触发事件</button>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            message: 'hello vue'
          }
        },
        created() {
           this.$on('my_events', this.handleEvents)
           //可以多个监听事件共同使用同一个回调函数
           //可以一个监听事件使用多个回调函数,回调函数的调用按顺序调用
           //this.$on('my_events2', this.handleEvents)
           //this.$on('my_events3', this.handleEvents)
           //this.$on('my_events4', this.handleEvents)
           
           //$on第一个参数可以接受一个数组,也就是多个监听事件使用同一个回调函数
           // this.$on(['my_events','events2','events3'], this.handleEvents)
        },
        methods: {
          handleEvents(e) {
            console.log(this.message, e)
          },
          boost() {
            this.$emit('my_events', 'my params')            
          }
        }
      })
    </script>
  </body>
</html>

1.应用场景,一般在子组件使用this.$emit(‘my_events’, ‘my params’) 定义事件名称my_events,还可以传递数据,列如:‘my params’,

2.然后在父组件中使用 this.on(‘my_events’, this.handleEvents)监听子组件何时出发的方法,my_events是子组件定义的事件名字,this.handleEvents(e){},是this.$on的回调函数,其中e是子组件传递过来的数据。

你可能感兴趣的:(web前端,$emit,$on,vue,emit,on,vue.js,javascript)