webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效
先给一个例子：
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
利用全局初始化Vue对象作为载体：
window.onload=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
//准备一个空的实例对象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
mounted(){
console.log(456)
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
mounted(){
console.log(123)
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this));
//接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
- 此时可以传递一些信息，在不同.vue文件内传递方式：
var vm = new Vue({
router,
render: h => h(App),
data(){
return {
msg:"快下班了",
myEvent: new Vue(),
my:9527
}
}
初始化定义一个event的vue对象，然后“发射”数据：
translate(){
this.$root.myEvent.$emit('ruby', this.muy);
}
绑定数据：
mounted(){
this.$root.myEvent.$on('ruby', (a)=>{
this.pp=a;
});
}
这样可以实现组件间的信息的传递，但是如果有路由的存在的话就不行了，可以使用路由传参的形式来实现：
主要有以下几个步骤：
//配置路由
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[
{path:':username/age/:age', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
<li><router-link to="/user/strive/age/10">Strive</router-link></li>
（3）在router的目标组件上获取入参:
var UserDetail={
template:'<div>{{$route.params}}</div>'
};
webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效的更多相关文章
- 单一事件中心管理组件通信( vuex )
有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线: 补充$emit ,$on的讲解 代码: <!DOCTYPE html> <h ...
- vue2 单一事件中心管理组件通信
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- vuejs组件交互 - 02 - 事件中心管理组件间的通信
事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...
- vue.js组件之j间的通讯四,通过单一事件来管理组件通讯
总结; 首先需要创建是一个空实例: var vm = new Vue(); vm.$emit(事件,数据); vm.$on(事件,function(data){ }bind(this))
- vue.js组件之j间的通讯三,通过单一事件来管理组件通讯
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Vue.js父与子组件之间传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
随机推荐
- Linux设备驱动之IIO子系统——IIO框架数据读取
IIO DATA ACCESS IIO数据获取 只有两种方法可以使用IIO框架访问数据; 通过sysf通道进行一次性捕获,或通过IIO字符设备进行连续模式(触发缓冲). One-shot captur ...
- vuex2中使用mapGetters/mapActions报错解决方法
解决方案 可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread . ...
- TS学习随笔（七)->声明文件
now我们来看一看TS怎么声明文件, 在JS里面我们经常会使用各种第三方类库,引入方式也不太相同,常见的就是在HTML中通过script标签引入,然后就可以使用全局变量$或者jQuery了 我们通常这 ...
- 转载： ssh连接上华为云Linux服务器，一会就自动断开
原文链接:https://www.cnblogs.com/mspeer/p/9907734.html 客户端向服务端发送心跳 依赖 ssh 客户端定时发送心跳,putty.SecureCRT.XShe ...
- 如何关闭tornado.web的Application
研究热更新Python程序时,需要将已有的HTTP服务器重启. 我的HTTP服务器是用tornado.web.Application生成的,这样很简单: import tornado.web weba ...
- android Q build 变化
一 概述 android Q build变化整体上越来越严格,语法上之前能够使用的Q上将不能使用. 二 主要变化 2.1 'USER' 弃用 ‘USER’后面的值会被设置成‘nobody',andr ...
- Delphi连接MySql（待测试验证，使用mysql.pas未通过）
要在一个Delphi程序中调用Mysql数据库,查到有个资料如下,待验证,验证后会给出结果.暂时做个标记 已经验证,验证日期:2018.6.18 验证结果:不可行 验证工具:XE7,mysql5.5. ...
- 基本的CRUD操作
导入包---实体类------数据库连接----数据库操作----service层数据操作----网页对service层可视化实现 model package com.ij34.model; publ ...
- Python文件操作之把臂入林
文件操作1.打开文件open(file, mode='r', buffering=None, encoding=None, errors=None, newline=None, closefd=Tru ...
- AFNetworking源码浅析
本文将从最简单的GET请求方法的使用入手,由表及里,逐步探究AFNetworking如何封装处理原生的网络请求. 一.AFNetworking的简单使用 -(void)getDemo{ AFHTTPS ...