经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
Vue中bus的使用
来源:cnblogs  作者:bugSource  时间:2021/4/6 9:33:47  对本文有异议

vue总线机制(bus)

vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。

bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

组件通信bus的使用

在utils文件下下创建bus.js

  1. // utils - bus.js
  2. import Vue from 'vue'
  3. const bus = new Vue()
  4. export default bus

一、传值

发送信息

  1. import bus from '@/utils/bus'

第一个参数为标志变量,第二个参数为通信的值

  1. us.$emit('message', 'hello');

接收信息

  1. import bus from '@/utils/bus'

第一个参数为标志变量,第二个参数中的e为通信的值

  1. bus.$on('message', (e) => {
  2. console.log(e)
  3. })

二、调用方法

一个组件(A)调用另一个组件(B)的方法

B组件的方法

  1. import bus from '@/utils/bus'
  2. mounted () {
  3. bus.$on('testA', this.testA)
  4. },
  5. testA () {
  6. console.log('由A组件调用')
  7. }

A组件调用

  1. import bus from '@/utils/bus'
  2. mounted () {
  3. bus.$emit('testA')
  4. }

原文链接:http://www.cnblogs.com/bugSource/p/14582525.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号