Vue emit不触发

1. Vue.js简介

Vue.js是一个轻量级的JavaScript框架，用于构建用户界面。它采用组件化的开发模式，使开发者能够将整个应用程序划分为多个可重用的组件。Vue.js具有响应式的数据绑定和组件化系统，在构建现代化Web应用程序时非常流行。

2. Emit和EventBus

在Vue.js中，emit和EventBus是两种常用的方法，用于在组件之间进行通信。

2.1 Emit

emit是Vue.js提供的一种自定义事件机制，用于在子组件触发一个自定义事件，并向父组件传递数据。通常，父组件通过监听该事件来获取传递的数据。

在子组件中，通过this.$emit(eventName, data)的方式来触发一个自定义事件并传递数据。在父组件中，使用v-on:eventName或@eventName来监听该事件。

示例代码：

<!-- 子组件 -->
<template>
  ...
  <button @click="triggerEvent"></button>
  ...
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('customEvent', this.data);
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  ...
  <child-component @customEvent="handleCustomEvent"></child-component>
  ...
</template>

<script>
export default {
  methods: {
    handleCustomEvent(data) {
      // 处理传递的数据
    }
  }
}
</script>

2.2 EventBus

EventBus是一个简单的JavaScript对象，用于在Vue.js应用程序中进行非父子组件之间的通信。通过在EventBus上触发自定义事件，各组件可以进行通信。

首先，需要在Vue实例中创建一个EventBus：

// main.js
Vue.prototype.$bus = new Vue();

然后，在需要通信的组件中，通过this. $bus.$ emit(eventName, data)来触发自定义事件，并通过this. $bus.$ on(eventName, callback)来监听该事件。

示例代码：

<!-- 组件A -->
<script>
export default {
  methods: {
    triggerEvent() {
      this. $bus.$ emit('customEvent', this.data);
    }
  }
}
</script>

<!-- 组件B -->
<script>
export default {
  mounted() {
    this. $bus.$ on('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      // 处理传递的数据
    }
  }
}
</script>