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() 。

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

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

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

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

<School @test="test"/>

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

子组件解绑事件

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

<template>
  <div>
    <p class="demo" @click="goto">School组件</p>
    <p @click="unbind">解绑事件</p>
  </div>
</template>

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() 函数不触发，匿名函数触发

<template>
  <div>
    <p @click="test">测试</p>
    <p @click="remove">解绑myCallback</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 添加事件监听器，在组件挂载后执行 myCallback 函数
    this.$on('myEvent', this.myCallback);
    this.$on('myEvent', () => {
      console.log('我是匿名函数，我被触发了')
    });
  },
  methods: {
    test() {
      this.$emit('myEvent')
    },
    remove() {
      console.log('我解绑了myCallback，但是没有解绑匿名函数')
      this.$off('myEvent',this.myCallback)
    },
    myCallback() {
      console.log('我是myCallback，我被触发了')
    }
  },
};
</script>

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

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

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

<School @test="test" @test1="test1"/>

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

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

<template>
  <div>
    <p @click="bind">绑定</p>
    <p @click="remove">解绑</p>
  </div>
</template>

<script>
export default {
  methods: {
    bind() {
      this.$emit('test','test')
      this.$emit('test1','test1')
    },
    remove() {
      this.$off()
    },
  },
};
</script>

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

 Vue destroyed() 生命周期

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

<template>
  <div>
    <p @click="bind">绑定</p>
    <p @click="death">销毁子组件</p>
  </div>
</template>

<script>
export default {
  methods: {
    bind() {
      this.$emit('test','test')
      this.$emit('test1','test1')
    },
    death() {
      this.$destroy()
    }
  },
};
</script>

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

总结

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

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

3、绑定自定义事件：

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

• <School @test="test"/>
  
  <School v-on:test="test"/>

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

• <School ref='student'/>
  
  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 触发

<School @click.native="test"/>

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