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 ...
随机推荐
- 从零开始学习PYTHON3讲义(十二)画一颗心送给你
(内容需要,本讲使用了大量在线公式,如果因为转帖网站不支持公式无法显示的情况,欢迎访问原始博客.) <从零开始PYTHON3>第十二讲 上一节课我们主要讲解了数值计算和符号计算.数值计算的 ...
- ES 09 - 定制Elasticsearch的分词器 (自定义分词策略)
目录 1 索引的分析 1.1 分析器的组成 1.2 倒排索引的核心原理-normalization 2 ES的默认分词器 3 修改分词器 4 定制分词器 4.1 向索引中添加自定义的分词器 4.2 测 ...
- MySQL系列--3.数据类型和连接查询
1.存储引擎 数据创建,查询,更新和删除操作都是通过数据引擎来进行的.不同的存储引擎存储限制不同,支持不同的索引机制等. 查询数据库支持的存储引擎 MySQL 5.7.2支持的存储引擎有:InnoDB ...
- Asp.Net Core 轻松学-实现跨平台的自定义Json数据包
前言 在前后端分离的业务开发中,我们总是需要返回各种各样的数据包格式,一个良好的 json 格式数据包是我们一贯奉行的原则,下面就利用 Json.Net 来做一个简单具有跨平台的序列化数据包实 ...
- Java并发编程系列-AbstractQueuedSynchronizer
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/10566625.html 一.概述 AbstractQueuedSynchronizer简 ...
- Spring基础系列-Web开发
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9996902.html SpringBoot基础系列-web开发 概述 web开发就是集成 ...
- [Javascript] encodeURIComponent()方法
在vue項目中使用vue-router通过url进行传值 encodeURIComponent encodeURIComponent() 函数可把字符串作为 URI 组件进行编码.encodeURIC ...
- javaweb中上传视频,并且播放,用上传视频信息为例
1.上传视频信息的jsp页面uploadVideo.jsp <body background="image/bk_hero.jpg"><div id=" ...
- vue学习记录①(vue-cli脚手架构建项目结构)
我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...
- Webpack 4教程:为什么要优化代码
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/07/30/webpack-4-course-part ...