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

父组件调用子组件的方法，可以传递数据。

父组件：

  
  点击父组件

子组件：

2.$emit的使用

子组件调用父组件的方法并传递数据。

子组件：

父组件：

3.$on的使用场景

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

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

父组件：

4.$once的使用场景

参数：

  {string} event
  {Function} callback

用法：

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

可以看一下
https://blog.csdn.net/weixin_42472040/article/details/108525976

// 修饰符
保存

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

5.$off的使用场景

参数：

  {string | Array} 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)
            // 不能有回调函数，第一个无效，因为 只移除这个回调的监听器
        },