先給一個例子：
<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>' };