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; }); }
这样可以实现组件间的信息的传递,但是如果有路由的存在的话就不行了,可以使用路由传参的形式来实现:
主要有以下几个步骤:
(1) 设置好路由配置
//配置路由
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[
{path:':username/age/:age', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
(2)在router-link中传递参数(动态路径参数):
<li><router-link to="/user/strive/age/10">Strive</router-link></li>
(3)在router的目标组件上获取入参:
var UserDetail={ template:'<div>{{$route.params}}</div>' };
When I advent at this land the word will be filled by dark,Black area black sheep!