非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)
2018-10-30 11:47
337 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaoweidreamy/article/details/83539553
-
效果图(点击一个数据A,数据B会变成数据A)
-
$emit, $on
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4.5非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <child content="Mom"></child> <child content="Dad"></child> </div> <script> Vue.prototype.bus = new Vue() Vue.component('child',{ props: { content:String }, data: function () { return { selfContent: this.content } }, template: '<div @click="handleClick">{{selfContent}}</div>', methods: { handleClick: function () { this.bus.$emit('change',this.selfContent) } }, mounted: function () { var this_ = this this.bus.$on('change',function (msg) { this_.selfContent = msg }) } }); var vm = new Vue({ el: '#app' }) </script> </body> </html>阅读更多
相关文章推荐
- 非父子组件传值(Bus/总线/发布订阅者模式/观察者模式)
- vue学习18:非父子组件间的传值(bus/总线/发布订阅者模式/观擦者模式)
- 应用集成实战系列:服务总线中的发布订阅业务模式
- 观察者和发布订阅模式的区别
- 利用观察者模式(发布/订阅模式)制作一个“代替”广播的通知类
- C#设计模式--观察者模式(发布-订阅模式)
- 观察者模式(订阅与发布模式),史上最简单的观察者和被观察者理解;
- 监听器设计模式(观察者模式、订阅发布模式)
- 观察者模式 VS 发布/订阅(广播)
- 观察者模式和与发布订阅模式的区别
- 观察者模式和“发布-订阅”模式有区别吗?
- Java设计模式之观察者模式(发布/订阅模式)
- 设计模式(三):观察者模式与发布/订阅模式区别
- JAVA设计模式——观察者模式(发布-订阅模式)
- 学习javascript设计模式之发布-订阅(观察者)模式
- 观察者模式 (发布­-订阅模式)
- 设计模式(三)观察者模式Observer(发布订阅)
- 一、概述 EventBus是一款针对Android优化的发布/订阅事件总线。主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间
- java笔记--设计模式之观察者(订阅/发布)模式
- JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例