vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的。
eventBus.js
import Vue from 'vue' const eventBus = new Vue() export default eventBus
父组件brother.vue
<template>
<div>
<bro1></bro1>
<bro2></bro2>
</div>
</template>
<script>
import bro1 from '../../components/br1'
import bro2 from '../../components/br2'
export default{
components: {
bro1,
bro2
}
}
</script>
子组件1
bro1.vue
<template>
<div>
<span>this is big bro</span>
<input type="text" v-model="bro1">
<button @click="sendMsg">click to send to bro2</button>
</div>
</template>
<script>
import eventBus from '../eventBus.js'
export default{
data () {
return {
bro1: ''
}
},
methods: {
sendMsg () {
//在bro1中触发
eventBus.$emit('bad-man-comes', this.bro1)
}
}
}
</script>
子组件2
bro2.vue
<template>
<div>
<span>this is little bro</span>
<input type="text" v-model="bro2">
</div>
</template>
<script>
import eventBus from '../eventBus'
export default{
data () {
return {
bro2: ''
}
},
mounted () {
eventBus.$on('bad-man-comes', (params) => {
// 在bro2中监听
this.bro2 = params
})
}
}
</script>
vue中兄弟组件间通讯的更多相关文章
- vue中兄弟组件间 的传值 bus(可以理解为公共交通)
点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化 1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...
- Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Vue] vuex进行组件间通讯
vue 组件之间数据传输(vuex) 初始化 store src/main.js import Vuex from "vuex"; Vue.use(Vuex); new Vue({ ...
- vue中 父子组件的通讯
1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件 实例: 父组件: layout.vue 子组件:logform.vue 子组件: < ...
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
- React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
- Vue-组件传值:子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- vue.js 兄弟组件传值
另: 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
随机推荐
- 4~20mA电流输出芯片XTR111完整电路(转)
源: 4~20mA电流输出芯片XTR111完整电路
- php开启xdebug扩展
1.下载Xdebug(先看php下的ext文件夹(C:\xampp\php\ext)下有没有php_xdebug.dll文件,如果有的话,就不用下了.) 到目前为止,Xdebug的最新版本为2.7.0 ...
- uml类图和er图中主外键的表示区别
在er图也就是数据库中,无论是mysql/oracle都是从表引用主表的pk作为外键. 而在uml类图表示法中,他们的顺序则刚好相反,从主对象导向到子对象,如下: 主体是资金借款方,征信信息和资金借款 ...
- mint-ui之Swipe使用
<template> <div> <div class="swipe-wrapper"> <mt-swipe :auto="10 ...
- 【TensorFlow】tf.nn.max_pool实现池化操作
max pooling是CNN当中的最大值池化操作,其实用法和卷积很类似 有些地方可以从卷积去参考[TensorFlow]tf.nn.conv2d是怎样实现卷积的? tf.nn.max_pool(va ...
- 经典算法分析:n与lgn
顺序查找O(n) 二分查找O(lgn) 通过代码来感受性能差别 package recursion; /** * @author zsh * @company wlgzs * @create 2019 ...
- 使用SSH框架遇到的错误总结
1.org.hibernate.exception.ConstraintViolationException: could not insert: 如果是主键是自增序列,映射文件 指定主键生成器< ...
- iOS开发 -------- UITableView的编辑
一 核心API Class: UITableView Delegate: UITableViewDataSource, UITableViewDelegate 涉及到的API: 插入和删除 1 /** ...
- SpringBoot 使用Sharding-JDBC进行分库分表及其分布式ID的生成
为解决关系型数据库面对海量数据由于数据量过大而导致的性能问题时,将数据进行分片是行之有效的解决方案,而将集中于单一节点的数据拆分并分别存储到多个数据库或表,称为分库分表. 分库可以有效分散高并发量,分 ...
- 深入了解JVW
Java内存组成介绍:堆(Heap)和非堆(Non-heap)内存 按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时 ...