Vue事件总线
2023-09-11 14:22:30 时间
相邻组件之间可以通过this.$emit(‘xxx’)触发父组件的事件并且传递参数
那么隔着多个组件,如果一步到位,触发对方的事件并且传递参数呢?
Vue.prototype.$bus= new Vue(); //main.js中,在vue原型上挂载
this.$ bus.$on('dataFromA', function (data) {
}); // 一般在mounted生命周期函数中挂载
this.$ bus.$emit('dataFromA', this.dataA); //一般在想要触发的函数中使用
注意:使用总线,不仅仅局限于父子关系,组件B可以与组件A是父子、兄弟等等任意关系。
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- vue-cli 3.0 index.html引入第三方js文件
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Get up and running with vue-router
- vue事件修饰符:通过@click.capture捕获内层事件(爷爷-父亲-儿子)
- vue事件修饰符:通过@click.self的self属性来阻止内层向外层冒泡
- 架构设计:Vue+nginx+jwt+zuul+eureka+ribbon+hystrix+rabbitmq+mysql集群+redis集群+elsticsearch集群
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- Vue中拆分视图层代码的5点建议
- vue 鼠标移入移出事件执行多次(尤其ie)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- 135:vue+openlayers添加海量点,使用WebGLPoints方法(示例代码)
- 134:vue+openlayers 编辑事件modifystart和modifyend(示例代码)
- 077:vue+openlayers加载geoserver发布的遥感影像,开启关闭AOI及影像(示例代码)
- 032:vue+openlayers加载CSV数据(代码示例)
- 053:vue+openlayers使用setPosition来定位弹窗(示例代码)
- vue监听手机键盘搜索事件
- 【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题
- 【三十天精通Vue 3】第十三天 Vue 3 的插件详解