创建一个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中央事件总线的更多相关文章

  1. vue bus 中央事件总线

    1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() //  全局引入mai.jsvue中央事件总 ...

  2. 记一笔vue中的中央事件总线的问题,以及解决方案

    代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...

  3. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  4. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  5. vue笔记 - 组件间通信 之 中央事件总线bus

    中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...

  6. Vue开发中的中央事件总线

    在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...

  7. 深度剖析Vue中父给子、子给父、兄弟之间传值!

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  8. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  9. vue兄弟组件传值——事件总线

    1.创建一个js文件,例如msg.js,放到合适位置,例如components中,或者其他位置也行.然后在兄弟两个组件中分别引入msg.js文件 msg.js: import Vue from 'vu ...

随机推荐

  1. 异常 - 虚拟机初始化错误 - Error occurred during initialization of VM

    目录 1 环境配置信息 1.1 服务器配置信息 1.2 Tomcat启动参数 2 问题描述 3 问题解决 4 关于vm.overcommit_memory参数 4.1 vm.overcommit_me ...

  2. PyCharm出现TabError: inconsistent use of tabs and spaces in indentation最简单实用的解决办法

    本文使用PyCharm的格式化代码功能解决TabError: inconsistent use of tabs and spaces in indentation. 当把代码从别处复制进来PyChar ...

  3. git push提交报错,提示文件过大,且去掉大文件也报同样的错误

    错误原因: 大文件存在没有被提交的commit记录里面: 解决方案: 删除有大文件的commit记录即可 移除大文件的正确姿势 $ git rm --cached giant_file(文件名) # ...

  4. python实现某目录下将多个文件夹内的文件复制到一个文件夹中

    现实生活中,我们经常有这样的需求,如下图,有三个文件夹,文件夹1内含有1.txt文件 文件夹2中内含有2.txt文件,文件夹3中含有3.txt文件.我们有时候需要把1.txt, 2.txt, 3.tx ...

  5. C# 连接/查询Jira

    查询jira数据,如果是前端,可以按照如下格式直接访问,获取数据 http://jira.company.com/rest/api/2/search?jql=project = REM AND res ...

  6. mybatis 参数格式异常-- Error querying database. Cause: java.lang.NumberFormatException: For input string

    mybatis中 <if></if>标签中进行判断时,如果传入的时字符格式和数字进行判断需要将数字进行转译,否则默认是数字和数字进行比较,这是就会出现参数格式异常如<if ...

  7. hash一致性

    参照:https://www.cnblogs.com/moonandstar08/p/5405991.html 参照:http://www.cnblogs.com/haippy/archive/201 ...

  8. mac 卸载通过官网下载包安装的node

    sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

  9. SAP MM 公司间STO里交货单PGI之后自动触发内向交货单功能的实现

    SAP MM 公司间STO里交货单PGI之后自动触发内向交货单功能的实现 笔者所在的项目上的公司间STO的流程里,发货公司在做PGI之后系统自动触发收货公司的内向交货单.这个功能是通过交货单的Outp ...

  10. Snapde电子表格支持的文件格式

    Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏.那么它支持哪些文件格式呢? 1.CSV文件格式,是一种以逗号分隔列.以回车分隔行的文本文 ...