Vue 自定义事件绑定与解绑

绑定自定义事件

说到 Vue 自定义事件，那就需要搞清楚一个问题，为啥有这个玩意。

说到自定义事件之前，需要理解 组件基础的概念。理解了基础概念之后，我们就知道 Vue 的父子之间的通信， 一是  父组件通过 Prop 向子组件传递数据 。二是 监听子组件事件。

具体详情参考之前的博文：Vue-父子组件传值。

vue-07-父子组件传值_vue handler(n) {}_白桃味稠鱼烧的博客-CSDN博客因为vue 的数据是单向流动的，这是为了避免数据污染。在官方文档中也说到：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。大致归纳一下：父传子--传值、子传父--传事件1、父传子如果传递的数据是对象格式的，那么在子组件 内部监..._vue handler(n) {}https://blog.csdn.net/qq_40792800/article/details/105559859这篇博文中详细说明了 父子组件传值的方法，其中就有 子组件传递数据给父组件的三种方法，其实就是 通过自定义事件 来实现的。实现方法也在其中详细说明了。

$off：解绑自定义事件

 上面说过了 通过绑定自定义事件，实现了子组件向父组件传递数据，那么既然有绑定方法，就应该和原生js一样，有解绑的方法，也存在解绑的方法，那就是 $off() 。

• 如果没有提供参数，则移除所有的事件监听器；

• 如果只提供了事件，则移除该事件所有的监听器；

• 如果同时提供了事件与回调，则只移除这个回调的监听器

父组件只使用一种绑定方法

methods: {
  test(val) {
    console.log(val,'这是子组件传递过来的数据')
  },
},

子组件解绑事件

1、只提供事件，则移除该事件所有的监听器（ 只传递一个事件和传递多个事件 ）

export default {
  data() {
    return {
      msg: "子组件数据",
    };
  },
  methods: {
    goto() {
      this.$emit("test", this.msg);
    },
    unbind() {
      console.log("解绑事件");
      this.$off('test');  // 若只传递一个参数，则只解绑一个自定义事件
      this.$off(['test1','tset2','test3']);  // 若传递一个数组，则同时解绑传递的多个自定义事件
    },
  },
};

触发父组件事件之后，点击触发解绑事件，再次触发父组件事件，无法打印出子组件数据

 2、同时提供了事件与回调，则只移除这个回调的监听器

• 我在子组件的 mounted 生命周期中 监听了 myEvent 事件，且该事件上存在两个回调函数
• 点击 测试按钮时，$emit 触发 myEvent 事件，myEvent 事件上的回调函数全部触发
• 点击解绑按钮，解绑 myEvent 事件 上的 this.myCallback() 函数，只剩下 匿名函数
• 再次点击 测试按钮，发现 myEvent 事件 上，this.myCallback() 函数不触发，匿名函数触发

 

 ps：$on 监听事件之后，需要 $emit 触发事件监听，才去执行 $off，不然绑定的事件没触发，看不出来效果( 绑定事件都不触发，你解绑它干啥，直接不监听就行了啵 )

3、 如果没有提供参数，则移除所有的事件监听器

在父组件中给 School子组件 绑定两个自定义事件

methods: {
  test(val) {
    console.log(val,'这是子组件传递过来的数据')
  },
  test1(val) {
    console.log(val,'这是子组件传递过来的数据1')
  },
},

在子组件中触发两个绑定的自定义事件

• 点击 bind 触发绑定事件，控制台上会打印出数据。
• 点击 remove 移除所有绑定事件。
• 再次点击 bind 触发绑定事件，控制台无输出，表明所有绑定事件已移除

 Vue destroyed() 生命周期

 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

• 点击 bind 按钮，触发绑定函数，控制台上输出。
• 点击 销毁子组件 按钮，销毁子组件，移除所有事件监听器，解绑所有指令
• 再次点击 bind 按钮，控制台无输出

总结

 1、组件的自定义事件是一种组件间的通信方式：子组件 向 父组件 传递数据。

2、使用场景：子组件B 向 父组件A 传递数据，需要在 父组件A 中给 子组件B 绑定自定义事件( 事件的回调在 A 中 )

3、绑定自定义事件：

• 第一种方式：在父组件中 
• 第二种方式：在父组件中

• 
  
  mounted() {
    this.$refs.student.$on('qwe', this.getname)
  }

• 第三种方式：若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $ones 方法

4、触发自定义事件 

this.$emit('test','向传递的数据')

 5、解绑自定义事件

this.$off()

6、也可以使用  生命周期钩子函数 this.$destroy() 来销毁组件达到解绑所有自定义事件

7、组件上也可以绑定 原生DOM事件，使用  .native 事件。即使是 @click 事件，Vue也不会将其解析为 自定义事件，不用在 School 子组件中 使用 $emit 触发

8 、注意：通过 this.$refs.xxx.$on( 'xxx' , callback )，绑定自定义事件时，callback 回调要么配置在 mtenods 中，要么使用箭头函数，否则 this 指向存在问题( 因为 callback 函数接收的参数都是从子组件中传递的，包括 this也是，如果使用 function () {} 函数，则该函数内部 this 指向子组件 )