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 ...
随机推荐
- asp.net 建多个项目实现三层的实例——读取一张表中的记录条数
学习asp.net两周,通过学习发现,.net和php之间的区别还是蛮大的,比php要复杂一些,开始学习的有些吃力,后来跟着传智播客里的老师学习,渐渐的学到了一些东西. 今天要记录一下.net里的简单 ...
- winform中获取指定文件夹下的所有图片
方法一: C#的IO自带了一个方法DirectoryInfo dir = new DirectoryInfo("文件夹名称");dir.getFiles();//这个方法返回值就是 ...
- Java 重建二叉树 根据前序中序重建二叉树
题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2, ...
- ajax点击加载更多数据图片（预加载）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 15 ， CSS 背景与列表
1.CSS 中背景的使用 2.CSS 中列表的使用 15.1 CSS 中背景的使用 属性名称 属性值 说明 background-attachment scroll 设置背景图像会随视窗滚动 条的移动 ...
- iOS----------弹窗动画
- (void)animationAlert:(UIView *)view { CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation ani ...
- Ubuntu 18.04 安装博通（Broadcom）无线网卡驱动
目录 Ubuntu 18.04 安装博通(Broadcom)无线网卡驱动 Package gcc is not configured yet. 解决办法 history history | grep ...
- MySQL的自动提交模式
默认情况下, MySQL启用自动提交模式(变量autocommit为ON).这意味着, 只要你执行DML操作的语句,MySQL会立即隐式提交事务(Implicit Commit).这个跟SQL S ...
- CGI 、FastCGI、PHP-CGI、PHP-FPM 定义以及与nginx的应用关系
CGI common gateway interface,简称cgi,简而言之就是一个接口,一种协议.它的作用就是帮助服务器与语言通信. 这里以nginx和php为例,因为nginx和php的语言不通 ...
- c/c++ 网络编程 文件传输
网络编程 文件传输 1,文件发送端 2,文件接收端 文件发送端: #include <iostream> #include <string.h> #include <sy ...