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 ...
随机推荐
- Oracle11g创建表空间、创建用户、角色授权、导入导出表以及中文字符乱码问题
[转载]原文地址:https://www.cnblogs.com/bjh1117/p/6605037.html 前提:本机已经安装了Oracle11g数据库. 需求:使用PL SQL数据库连接工具操作 ...
- 栈到CLR
提起栈想必会听到这样几个关键词:后进先出,先进后出,入栈,出栈. 栈这种数据结构,数组完全可以代替其功能. 但是存在即是真理,其目的就是避免暴漏不必要的操作. 如角色一样,不同的情景或者角色拥有不同的 ...
- Python后台开发Django(启动)
Django版本为:2.1.7 Python的web框架,MTV思想 MVC Model(模板文件,数据库操作) view(视图模板文件 )controller(业务处理) MTV Model(模 ...
- java SE Development kit 8 Update 201 (64-bit) 的安装相关
登录http://www.oracle.com,下载JDK(J2SE) JDK 1.0,1.1,1.2,1.3,1.4 1.5 (JDK5.0) à支持注解.支持泛型 1.6(JDK6.0) à ...
- Spring Boot 1.5.x 基础学习示例
一.为啥要学Spring Boot? 今年从原来.Net Team“被”转到了Java Team开始了微服务开发的工作,接触了Spring Boot这个新瓶装旧酒的技术,也初步了解了微服务架构.Spr ...
- Android多Module下的Application引用方式
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 Android开发时,Application一般都放在APP中,Lib模块如果想引用Application则需要在APP中进行传递, ...
- Redis学习笔记~Twenproxy所起到的作用
回到目录 Twenproxy除了可以作为redis的代理,它同样支持memerycached.我这里主要了解Twemproxy在redis集群上的解决方案.Twemproxy除了完美的解决了分片,路由 ...
- C++求集合的交集差集
标准库的<algorithm>头文件中提供了std::set_difference,std::set_intersection和std::set_union用来求两个集合的差集,交集和并集 ...
- 命令行程序增加 GUI 外壳
Conmajia © 2012 Updated on Feb. 21, 2018 命令行大家都用过: 图 1 命令行程序工作界面 现在想办法为它做一个 GUI 外壳,实际效果参考图 2. 图 2 带 ...
- [Vue] vue中setInterval的问题
vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg( ...