vue兄弟之间传值 bus中央事件总线
创建一个eventVue.js文件
import Vue from 'vue'
export default new Vue
父
<template>
<div>
<div>父</div>
<v-youngerChild></v-youngerChild>
<v-bigChild></v-bigChild>
</div>
</template> <script>
import YoungerChild from './Child'
import BigChild from './BigChild'
export default {
components:{
'v-youngerChild':YoungerChild,
'v-bigChild':BigChild
}
}
</script>
哥哥
<template>
<div>
<div>哥哥</div>
{{message}}
</div>
</template> <script>
import eventVue from '../assets/js/eventVue.js'
export default {
data(){
return{
message:'哥哥'
}
},
created(){
eventVue.$on("myFun",(message)=>{
this.message=message
})
}
}
</script>
弟弟
<template>
<div>
<div>弟弟</div>
<button @click="abtn">点击</button>
</div>
</template>
<script>
import eventVue from '../assets/js/eventVue.js'
export default {
data(){
return{
msg:'弟弟'
}
},
methods:{
abtn(){
eventVue.$emit("myFun",this.msg)
}
}
}
</script>
vue兄弟之间传值 bus中央事件总线的更多相关文章
- vue bus 中央事件总线
1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() // 全局引入mai.jsvue中央事件总 ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue笔记 - 组件间通信 之 中央事件总线bus
中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值!
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- vue兄弟组件传值——事件总线
1.创建一个js文件,例如msg.js,放到合适位置,例如components中,或者其他位置也行.然后在兄弟两个组件中分别引入msg.js文件 msg.js: import Vue from 'vu ...
随机推荐
- JDK中的Atomic包中的类及使用
引言 Java从JDK1.5开始提供了java.util.concurrent.atomic包,方便程序员在多线程环境下,无锁的进行原子操作.原子变量的底层使用了处理器提供的原子指令,但是不同的CPU ...
- “挑三拣四”地学一学Java I/O
古人云:“读书破万卷,下笔如有神”.也就是说,只有大量的阅读,写作的时候才能风生水起——写作意味着输出(我的知识传播给他人),而读书意味着输入(从他人的知识中汲取营养). 对于Java I/O来说,I ...
- pycharm安装svn插件
弄了svn的服务端和客户端,为了方便我pycharm的使用,我又在pycharm里进行了配置,要用到subversion 下载 https://sourceforge.net/projects/win ...
- DirectX11 初探XMVECOTR&XMMATRIX
初探DX11的数学库:向量XMVECOTR,矩阵XMMATRIX |XMVECTOR(XNA数学库的向量) DirectX中的一个核心数据类型为 XMVECTOR对它的运算可以使用SIMD指令集加速( ...
- 使用 线性规划 解决 数字 排序问题, +Leapms模型
问题 将如下一组数字从大到小排序. {10, 20, -32, 177, 0, -11.5, 19, 7, 6.2, -6.28, -2.71, 44} 解决办法 建立数学模型,给出各个数字的次序值. ...
- 企业级自动化运维工具---puppet详解
本文收录在Linux运维企业架构实战系列 1.认识puppet 1.1 引入 puppet是什么,咱们先不用专业的名词解释它,咱们先描述一些工作场景,看明白这些工作场景,自然会知道puppet是什么. ...
- Centos7+lnmp+zabbix4+分离mysql实验
一.简介 1.什么是zabbix zabbix是一个企业级的.开源的.分布式的监控套件. zabbix可以对网络和服务进行完整性,健康性的监控.zabbix利用灵活的告警机制,可以实验微信,短信和邮件 ...
- WPF Geometry 添加Path数据
当图片转svg,svg转Xaml后,根据数据加载显示图片 DrawingImage: <DrawingImage x:Key="Image.Search"> <D ...
- mysql判断条件不存在插入存在更新某字段
insert into mst_sequence(seq_type, seq_desc, seq_date, seq_no, create_time) VALUES('CK', 'XXX', NOW( ...
- VS打开项目或解决方案卡死,一直处于未响应状态。
1.背景:接手公司新项目时,无论用vs2013还是用vs2017都打开不了 2.解决办法:先把.suo文件删掉, 结果:vs2013可以打开,vs2017依旧打不开. 3.继续解决:上网搜了一下,把隐 ...