Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root">
<child content="Nay"></child>
<child content="Ek"></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.prototype.bus = new Vue()
Vue.component('child', {
data() {
return {
selfContent : this.content
}
},
props: {
content: String
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick() {
this.bus.$emit('change', this.selfContent)
}
},
mounted() {
// var that = this
// this.bus.$on('change', function(msg) {
// 这里this的指向发生了变更所以需要提前保存this，或者用箭头函数解决
// that.content = msg
// })
this.bus.$on('change', (msg) => {
this.selfContent = msg
})
}
})
var vm = new Vue({
el: '#root'
})
</script>
</body>
</html>
Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)的更多相关文章
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- vue中兄弟组件间 的传值 bus(可以理解为公共交通)
点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化 1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中非父子组件的传值bus的使用
非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...
- 20、解决Vue使用bus兄弟组件间传值，第一次监听不到数据
1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...
- 关于Vue中父子组件相互传值
Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...
- Vue之组件间传值
标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
随机推荐
- npm报错：无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本
npm报错 在 windows终端输入 vue init webpack app, 创建一个名为 app 的 Vue 项目时报错如下: 无法加载文件 D:\nodejs\node_global\web ...
- ZeroC ICE的远程调用框架 代理引用地址
在官方文档中称为Binding,协议-地址对的绑定.在Proxy模式中,一般地有三个参与者,Proxy,Subject以及RealSubject.Subject定义了Proxy(代理)和RealSub ...
- Discovery and auto register
1.Discovery 2. auto register 2.1 agent 端配置 2.2 server 端配置
- htm&css 颜色的浮动
目标样式 目标分析: 由图可知,整个色板可以分为三块 可以理解为一个大的盒子包含了三个小的盒子,定义如下 LEFT的定义方式 TOP的定义方式 class为bottom的块最为复杂,但分析方法也是异曲 ...
- js 根据指定的多个索引，删除相应的数组元素。splice + sort
更新于2018-04-19 var productItems = ["a", "b", "c", "d"]; var i ...
- Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务
1. 背景 不知不觉笔者来到流媒体部门已经一年半多了,积攒了不少的流媒体知识,但平时工作也比较忙,很少进行总结性的梳理,最近准备花几个周末时间写一个流媒体系列的实践文章,也算是给自己做总结的同时帮助有 ...
- 微信小程序获取二维码（直接上代码）https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN
应为是直接返回二进制数据所有与其他接口些许差别,希望能帮助现在的你! 谢谢!!! /** * 37.微信二维码生成 */ public String getWeiXinCourseMap() { ...
- redis centos 6.x 启动关闭脚本
#!/bin/sh #Configurations injected by install_server below.... EXEC=/usr/local/bin/redis-server CLIE ...
- Linux之find命令
1.find命令的作用 主要用于操作系统文件.目录的查找. 2.find命令常用参数 -name #按文件名查找 -type #按文件类型查找:b/p/c/p/l/f -size #但文件大小查找,G ...
- Spring Data JPA 条件查询的关键字
Spring Data JPA 为此提供了一些表达条件查询的关键字,大致如下: And --- 等价于 SQL 中的 and 关键字,比如 findByUsernameAndPassword(Stri ...