vue this.$emit调用函数传参

在Vue中，可以使用this.$emit()方法来触发一个事件，并且可以传递参数。这个方法会向父组件发送一个自定义事件，父组件可以通过v-on指令来监听这个事件并执行相应的方法。在调用this.$emit()方法时，第一个参数是事件名称，后面的参数是要传递的数据。例如：this.$emit('eventName', data)。在父组件中，可以使用v-on指令来监听这个事件，例如：@eventName="handleEvent"，其中handleEvent是父组件中的一个方法名。当子组件触发了eventName事件时，父组件中的handleEvent方法就会被执行，并且可以通过$event来获取子组件传递的数据。例如：@eventName="handleEvent($event)"。

相关问题

vue中this.$emit的作用

在Vue中，this.$emit是一个用于触发自定义事件的方法。它允许子组件向父组件传递数据或者通知父组件发生了某个事件。

当子组件需要向父组件传递数据时，可以使用this.$emit方法。子组件通过调用this.$emit方法并指定事件名称，可以将数据作为参数传递给父组件。父组件可以在模板中监听这个自定义事件，并在事件处理函数中获取子组件传递的数据。

下面是一个示例：
在子组件中：

// 子组件
methods: {
  handleClick() {
    this.$emit('custom-event', 'Hello, parent!'); // 触发自定义事件，并传递数据
  }
}

在父组件中的模板中监听自定义事件：

// 父组件模板
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

在父组件中定义事件处理函数：

// 父组件
methods: {
  handleCustomEvent(data) {
    console.log(data); // 输出：Hello, parent!
  }
}

通过这种方式，子组件可以将数据传递给父组件，并且父组件可以根据需要对数据进行处理。

$bus.$emit 传参

### Vue Event Bus 使用 `$bus.$emit` 传参

在 Vue 中，通过创建一个全局的事件总线（EventBus），可以实现不同组件之间的解耦通信。当使用 `bus.$emit` 发送带参数的事件时，这些参数会被传递给监听此事件的所有回调函数。

#### 创建并初始化 EventBus

为了确保整个应用都能访问到同一个实例，在项目入口文件或单独的服务文件中定义：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

引入上述模块至需要的地方以便于调用其上的方法[^1]。

#### 触发带有参数的自定义事件

假设有一个按钮点击后想要通知其他地方更新某些数据，则可以在相应处理逻辑里这样写：

methods: {
    handleClick() {
        // 向外发送名为 'update-data' 的消息，并附带两个参数
        EventBus.$emit('update-data', { id: 42, message: "Hello World!" });
    }
}

这里的关键在于第二个及其后的参数将会作为后续接收者的输入被依次对应地传入。

#### 接收来自 EventBus 的事件与参数

目标组件内注册对该特定名称的消息感兴趣的方法如下所示：

created () {
    // 订阅 'update-data' 事件
    EventBus.$on('update-data', function (data) {
        console.log(`Received data with ID ${data.id} and Message "${data.message}"`);
    })
},
beforeDestroy () {
    // 清除不再使用的侦听器以防内存泄漏等问题发生
    EventBus.$off('update-data');
}

每当有新的 `'update-data'` 被发出时，上面指定的日志语句就会被执行一次；同时注意清理工作的重要性以维护良好的性能表现。