vue中$emit和$on的使用

最新推荐文章于 2024-09-04 14:17:28 发布

小铁匠95

最新推荐文章于 2024-09-04 14:17:28 发布

阅读量3.8k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40431896/article/details/121288610

版权

本文详细介绍了Vue中`$emit`和`$on`的使用方法，包括`$on`用于监听自定义事件及接收传入值，`$emit`用于触发事件并传递参数。通过一个实际例子展示了如何实现子组件间通信，通过全局注册eventbus，子组件`content`触发事件，而`header`组件监听并响应这个事件，实现了内容的更新。此外，还提到了使用Vuex作为另一种子组件间通信的方案。

摘要由CSDN通过智能技术生成

1. vm.$on(event,callback)

用法：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外函数。
个人理解：监听接收传来的值

vm.$on('test',function(msg){
   
  console.log(msg)
})

示例：

2. vm.$emit(eventName,[…args])

用法：触发当前实例上的事件。附加参数都会传给监听器回调。
个人理解：注册一个自定义事件

// 只配合一个事件名使用emit

// 子组件
Vue.component('welcome-button',{
   
  template: `
    <button @click="$emit('welcome')">点击按钮</button>
  `
})
// 父组件
<div>
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>  
...
...
...
methods: {
   
  sayHi