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 ...
随机推荐
- 【安富莱STM32H7教程】第1章 初学STM32H7的准备工作
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第1章 初学STM32H7的准备工作 俗话说万事开头 ...
- break、continue以及return的区别
break.continue以及return的区别如下: 1.break break用于完全结束一个循环,跳出循环体,不再执行下面的代码.对于多层循环嵌套,如果break语句出现在嵌套循环中的内循环时 ...
- CMake安装grpc生成gRPCTargets.cmake文件
以下是安装语句: cd grpc_folder git submodule update --init cmake .. make -j 4 sudo make install 然而编写依赖gRPC的 ...
- 宁撞金钟一下,不打破鼓三千,IT人要有志气,要进就进大的好的公司
最近我也在帮一些朋友面试,再结合自身的经验,发现了一个意料之外情理之中的事情:个别挣钱能力一般或规模比较小的公司,对候选人的要求普遍比一些大公司反而高,而且工作时间普遍会比一些好公司要长. 比如一个税 ...
- 【Android Studio安装部署系列】二十一、Android studio将项目上传到github中
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 两个相关概念:git和github Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git ...
- 利用Bootstrap Paginator插件和KnockoutJS完成分页功能
在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模糊,做到心态崩溃!!! 哈哈,特此花点时间重新总结,并从最简单的分页,然后向多条件查询分页 ...
- NodeJs之邮件(email)发送
NodeJs之邮件(email)发送 一,介绍与需求 1.1,介绍 1,Nodemailer简介 Nodemailer是一个简单易用的Node.js邮件发送插件 github地址 Nodemailer ...
- 卷积神经网络CNN
卷积神经网络,在图像识别和自然语言处理中有很大的作用,讲cnn的中文博客也不少,但是个人感觉说的脉络清晰清晰易懂的不多. 无意中看到这篇博客,写的很好,图文并茂.建议英文好的直接去看原文.英文不好的就 ...
- Flask的session使用
由于http是无状态保存的协议,session可以看作不同请求之间保存数据的一种机制.flask的session是基于cookie的会话保持. 流程 当客户端进行第一次请求的时候,客户端的HTTP r ...
- 折腾Java设计模式之观察者模式
观察者模式 Define a one-to-many dependency between objects where a state change in one object results in ...