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 ...
随机推荐
- Java开发笔记（三）Java帝国的特种官吏
上一篇文章介绍了Java工程的帝国区划,末尾给出了一段Java代码例子,这个代码虽然勉强能看懂,但是有些细节令人不甚了了.比如说“// 参观朱雀台”为何能够直接跟在当前行后面?“System.out. ...
- Java开发笔记（三十一）字符类型的表达
前面介绍的Java编程,要么是与数字有关的计算,要么是与逻辑有关的推理,充其量只能实现计算器和状态机.若想让Java运用于更广阔的业务领域,就得使其支撑更加血肉丰满的业务场景,而丰满的前提是能够表达大 ...
- javascript进阶之AJAX
AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...
- Vue移动端项目模板
一个集成移动端开发插件的Vue移动端模板包含1.css: 使用stylus开发css 集成reset样式文件 修改UI组件文件 统一样式处理(如主题色等)2.UI组件 使用热门的vant与mint-u ...
- iOS ----------NSDate 、CFAbsoluteTimeGetCurrent、CACurrentMediaTime 的区别
框架层: NSDate 属于Foundation CFAbsoluteTimeGetCurrent() 属于 CoreFoundatio CACurrentMediaTime() 属于 QuartzC ...
- Android为TV端助力linux命令
从命令行push到系统目录,用户组是root,而代码里面的是个人用户组,所以要把你push进去的东西改成跟你APK一样的用户组,并且chmod -R 777 文件名修改文件的权限 修改用户组chown ...
- android 开发之 ListView 与Adapter 应用实践
在开发android中,ListView 的应用显得非常频繁,只要需要显示列表展示的应用,可以说是必不可少,下面是记录开发中应用到ListView与Adapter 使用的实例: ListView 所在 ...
- Django 如何让ajax的POST方法带上CSRF令牌
问题 大家知道,在大前端领域,有一种叫做ajax的东东,即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),它被用来在不刷新页面的情况下,提 ...
- Nginx+uWSGI启动Django
在之前的几篇博客中对Django的功能做了初步实践,这里链接贴一下: Django的安装和启动 Django之--网页展示Hello World! Django之--通过MVC架构的html模板展示H ...
- SQL高级查询技巧
SQL高级查询技巧 1.UNION,EXCEPT,INTERSECT运算符 A,UNION 运算符 UNION 运算符通过组合其他两个结果表(例如 TABLE1 和 TABLE2)并消去表中任何重 ...