$on $emit的用法

`$on`和`$emit`是Vue.js框架中用于在组件之间进行通信的两个方法。

`$on`用于在当前组件中监听指定事件。它的语法是：`this.$on(eventName, callback)`，其中`eventName`是要监听的事件名，`callback`是事件触发时执行的回调函数。

示例代码：

// 在父组件中监听子组件触发的事件
this.$on('childEvent', (payload) => {
  console.log('Received payload:', payload);
});

`$emit`用于触发指定事件并向其他组件传递数据。它的语法是：`this.$emit(eventName, payload)`，其中`eventName`是要触发的事件名，`payload`是要传递给其他组件的数据。

示例代码：

// 在子组件中触发事件并传递数据给父组件
this.$emit('childEvent', { message: 'Hello from child component' });

通过使用`$on`和`$emit`，可以实现组件之间的通信，使得它们能够相互发送和接收数据。

相关问题

$on, $emit

$on和$emit是Vue.js中的两个方法，用于实现组件之间的通信。

$on方法用于监听当前实例上的自定义事件。通过调用$on方法，可以在当前组件中监听指定的事件，并在事件触发时执行相应的回调函数。\[2\]例如，在子组件a中，可以使用Bus.$on('changeSelect', callback)来监听名为'changeSelect'的事件。当事件触发时，回调函数会被执行。

$emit方法用于触发当前实例上的自定义事件。通过调用$emit方法，可以在当前组件中触发指定的事件，并传递相应的数据。\[1\]例如，在子组件a中，可以使用Bus.$emit('changeSelect', data)来触发名为'changeSelect'的事件，并传递数据data。

总结起来，$on方法用于监听事件，$emit方法用于触发事件。它们可以在组件之间实现数据的传递和通信。
#### 引用[.reference_title]
- *1* [$emit,$on,$off--vue](https://blog.csdn.net/weixin_57844432/article/details/126599659)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [$emit和$on 的使用详细演示](https://blog.csdn.net/weixin_35773751/article/details/109341465)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue2 简单说明 $emit $on $off 的使用，防止$on多次触发](https://blog.csdn.net/mossbaoo/article/details/121262457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

$on和$emit兄弟组件传值

在 Vue.js 中，$on 和 $emit 是兄弟组件之间传值的常用方法。

$on 是一个事件监听器，用于在组件中监听特定的自定义事件。$on 可以在一个组件中监听另一个组件触发的事件。

$emit 是触发一个自定义事件的方法。它可以在一个组件中触发一个自定义事件，并且可以传递数据给监听这个事件的其他组件。

下面是一个简单的例子来演示如何使用 $on 和 $emit 进行兄弟组件传值：

在兄弟组件 A 中，我们可以使用 $emit 方法触发一个自定义事件，并传递需要传递的数据：

// 兄弟组件 A
methods: {
  sendDataToB() {
    this.$emit('customEvent', data);
  }
}

在兄弟组件 B 中，我们可以使用 $on 方法来监听兄弟组件 A 触发的自定义事件，并接收传递的数据：

// 兄弟组件 B
mounted() {
  this.$on('customEvent', this.handleCustomEvent);
},
methods: {
  handleCustomEvent(data) {
    // 处理传递过来的数据
  }
}

通过这种方式，兄弟组件 A 将数据通过自定义事件传递给兄弟组件 B。当兄弟组件 A 中触发了自定义事件时，兄弟组件 B 中的 handleCustomEvent 方法会被调用，并接收到传递的数据。

希望以上解答对你有帮助！如果还有其他问题，请随时提问。