vue中$refs, $emit, $on, $once, $off的使用详解

$once监听一个自定义事件。

$off移除自定义事件监听器。

只能监听自定义事件

推荐的清除定时器

直接在需要定时器的方法或者生命周期函数中声明并销毁,代码如下

export default{
  methods:{
    fun1(){
      const timer = setInterval(()=>{
        //需要做的事情
         console.log(11111);
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

---------------------------------------------------------------------

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.$on的使用场景

兄弟组件之间相互传递数据。
首先创建一个Vue的空白实例（兄弟组件的桥梁）
子组件A:发送放使用$emit自定义事件把数据带过去。

<template>
  <div>
    <span>A组件-{{msg}}</span>
    <input type="button" value="把A组件数据传递给B" @click="send">
  </div>
</template>
<script>
  export default{
    data(){
      return{
        msg:{
          a:'111',
          b:'222'
        }
      }
    },
    methods:{
      send(){
        this.$emit('aevent',this.msg)
      }
    }
  }
</script>

子组件B:接收方通过$on监听自定义事件的callback接收数据

<template>
  <div>
    <span>B组件，A传的数据为--{{msg}}</span>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:''
      }
    },
    mounted(){
      this.$on('aevent',(val)=>{//监听事件aevent，回调函数要使用箭头函数。
        console.log(val);//打印结果；我是a组件的数据。
      })
    }
  }
</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>

4.$once的使用场景

参数：

  {string} event
  {Function} callback

用法：

  监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

$once是一个函数，可以为Vue组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除。

$once有两个参数，第一个参数为字符串类型，用来指定绑定的事件名称，第二个参数设置事件的

<template>
  <div>
    <button @click="$emit('jpf')">按钮</button>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.$once('jpf', () => {
      console.log('once');
    });
  }
}
</script>

$once可以多次为同一个事件绑定多个回调，触发时，回调函数按照绑定顺序依次执行。

<template>
  <div>
    <button @click="$emit('jpf')">按钮</button>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.$once('jpf', () => {
      console.log('1');
    });
    this.$once('jpf', () => {
      console.log('2');
    });
  }
}
</script>

// 修饰符
<a-button @click.once="test()" type="primary">保存</a-button>

$once, $off上面 里说的监听器 指的是 $on的监听器

5.$off的使用场景

参数：

  {string | Array<string>} event (只在 2.2.2+ 支持数组)
  {Function} [callback]

用法：
移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。

// 选中返回数据
        handleChange(value) {
            this.$emit('change', value)
            this.$emit('Ok', value)
            this.$off('Ok', ()=> {
                console.log(1111111111111);
            })
            this.$off('change)
            // 不能有回调函数，第一个无效，因为 只移除这个回调的监听器
        },

来源：https://www.jianshu.com/p/33ac17271b43