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 ...
随机推荐
- 在win10系统开启linux子系统
1. 2.重启计算机 3.在winstore下载和安装 ubuntu 4.查看当前win10子系统的linux版本 lsb_release -a 5.设置root账号密码, 在终端输入命令 sudo ...
- 从零开始学安全(三十七)●VM汇编环境搭建
需要下载 vm 虚拟机 破解版连接 链接:https://pan.baidu.com/s/1r9MyPkNBmiYhQ8bdUxPmvQ 提取码:2o98 镜像文件和开发环境 链接:https://p ...
- PhpStorm 安装ApiDebugger
ApiDebugger,是一个开源的接口调试IntelliJ IDEA插件,具有与IDEA一致的界面,无需切换程序即可完成网络API请求,让你的code更加沉浸式. 安装 File->Setti ...
- Java开发笔记（四十六）类的构造方法
前面介绍了如何定义一个简单的类,以及它的成员属性和成员方法,从示例代码可以看到,不管是OrangeSimple还是OrangeMember,都要先利用关键字new创建一个实例,然后才能通过实例名称访问 ...
- Redis面试点
redis的数据结构有那些 字符串 String 字典:Hash 列表:List 集合:set 有序集合:sortedSet 如果大量的key设置在同一时间过期,一般需要注意什么 大量的key过期 ...
- 【.Net Core】获取绝对路径、相对路径
一.绝对路径 1.获取应用程序运行当前目录Directory.GetCurrentDirectory(). System.IO命名空间中存在Directory类,提供了获取应用程序运行当前目录的静态方 ...
- 委托(3).net 2.0中的委托
由于.net 2.0引入了匿名方法,所以创建委托的方式可以更简化了. .net 2.0中的委托 有了匿名方法,上一篇的例子可以简化为: namespace DelegateDemo { //声明委托 ...
- java开发环境配置——IDEA SVN的使用
一.安装svn客户端,在idea中配置svn 装小乌龟,TortoiseSVN ,就下图一个要注意的地方,这里默认 command line client tools是不安装的,选上.如果已经安装过了 ...
- JavaScript 代码简洁之道
摘要: 可以说是<Clean Code>的JS代码示例了,值得参考. 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有. 测试代码质量的唯 ...
- 一文看懂HTTPS的核心知识
1.HTTPS历史 由于HTTP的消息传输的安全隐患,于是网景公司在1994年设计了SSL(Secure Sockets Layer,安全套接字层)协议,目的是保障网上交易安全,从而就诞生了HTTPS ...