博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue兄弟组件通信
阅读量:6111 次
发布时间:2019-06-21

本文共 423 字,大约阅读时间需要 1 分钟。

所有需要通信的组件共用一个事件对象。new Vue(),新new一个vue对象,然后所有组件都访问这个对象,通过这个对象$emit事件,也通过这个对象$on监听事件。

实现一:直接在单文件里面实例化根Vue的时候,在data里return一个属性,值为new Vue(),例如bus: new Vue()

在具体的组件页面上,直接用this.$root.bus.$emit('eventName')发送事件。

在另一个组件页面的mounted函数里面,用this.$root.bus.$on('eventName', () => { // 一些要做的事  } )监听事件。

实现二:把共用的事件对象单独抽成一个bus.js文件,哪个组件要用到就引用进来,然后$emit或者$on。

实现三:抽成bus.js文件后,还可以作为Vue的插件。

 

转载于:https://www.cnblogs.com/coconutGirl/p/9447944.html

你可能感兴趣的文章
Atitit.软件开发提升稳定性总结
查看>>
lftp查看文件时间与登录服务查看文件时间相差8小时
查看>>
[leetcode]Next Permutation @ Python
查看>>
JAVA(2)——JDBC
查看>>
php heredoc 与 nowdoc
查看>>
DBA_Oracle DBA常用表汇总(概念)
查看>>
第30周二
查看>>
数学类杂志SCI2013-2014影响因子
查看>>
实用的树形菜单控件tree
查看>>
最近公共祖先(lca)
查看>>
【WP 8.1开发】文件选取器的使用方法
查看>>
Java实现BASE64编解码
查看>>
【Java】java基本知识
查看>>
之前学习wordpress的几张图片
查看>>
RT-Thread下的串口驱动程序分析【转载】
查看>>
UITableView的UITableViewStyleGrouped
查看>>
ecshop中getAll ,getOne ,getRow的区别
查看>>
Apple 企业开发者账号申请记录
查看>>
ecshop后台权限增加
查看>>
C#装饰者模式实例代码
查看>>