说明:vue中的组件传值方式有很多,$emit和$on只是其中一种
写法:
第一步:声明
先在main.js中声明$bus的指向,为什么叫bus呢?因为程序员都这样写,约定速成,可以理解成公交车(传值的过程很像上车和下车)

第二步:先在接收数据的页面先绑定(如图右)
在需要接收兄弟元素值的代码中写如下代码(on可以理解接收,getUsers是方法名称)
this.$bus.$on('getUsers',(users)=>{console.log('我是List组件,收到数据:',users); })
第三步:接着在发送数据的页面(如图左)
先通过请求方式获取到数据,再使用语法
this.$bus.$emit('getUsers',response.data.items)
同理,getUsers是方法名,后面的参数是右侧页面需要的值
文章介绍了在Vue中组件间通信的一种常见方式,通过事件总线($bus)实现。首先在main.js中定义$bus,然后在接收数据的组件中使用$on监听特定事件,如getUsers,在发送数据的组件中通过$emit触发事件并传递数据。这种方式允许不同层级的组件之间传递信息。

1万+

被折叠的 条评论
为什么被折叠?



