Vue.js 事件冒泡：如何让嵌套组件的事件在父组件中奏效？

2024-03-24 04:19:26

Vue.js 中的事件冒泡：让嵌套组件的事件在父组件中奏效

作为一名经验丰富的程序员和技术作家，我经常面临 Vue.js 中的事件冒泡问题。嵌套组件中的事件无法在父组件中触发，阻碍了应用程序的正常交互。为了解决此问题，本文将深入探讨两种有效的方法：原生事件修饰符和事件总线。

原生事件修饰符：简单直接

原生事件修饰符.native允许事件向上冒泡到父组件。在嵌套组件的事件处理程序上添加此修饰符，即可实现事件冒泡。

<template>
  <button @click.native="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 在父组件中处理此事件
    }
  }
}
</script>

事件总线：灵活且强大

事件总线是一个全局事件中心，允许组件之间通信，无论其父子关系如何。创建事件总线并将其存储在一个全局变量中：

const eventBus = new Vue();

在触发事件的组件中，使用$emit方法：

<template>
  <button @click="emitClickEvent">点击我</button>
</template>

<script>
export default {
  methods: {
    emitClickEvent() {
      this.$emit('click-event');
    }
  }
}
</script>

在监听事件的父组件中，使用$on方法订阅事件：

<template>
  <child-component @click-event="handleEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent() {
      // 处理事件
    }
  }
}
</script>