平行組件斤程、父子角寸、子父之間的值傳遞都可以使用中間對象來傳遞值，有些地方成為公交車對象忿墅，其原理就是將要傳遞的值放在一個單獨的對象上扁藕，要接受的地方從這個單獨的對象上去接受。其中主要用到一個獨立的Vue對象疚脐、$emit 和$on方法
-
vm.$emit( eventName, […args] )
-
參數(shù)：
{string} eventName[...args]
觸發(fā)當前實例上的事件亿柑。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。
-
-
vm.$on( event, callback )
-
參數(shù)：
-
{string | Array<string>} event(數(shù)組只在 2.2.0+ 中支持) {Function} callback
-
-
用法：
監(jiān)聽當前實例上的自定義事件棍弄。事件可以由
vm.$emit觸發(fā)望薄。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)呼畸。
詳情參見……
-
代碼案例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" id="app">
<div class="panel-heading">
<div class="panel-title">APP父組件</div>
</div>
<div class="panel-body">
<blockquote>
<p>接收其他組件傳來的值</p>
<!--其他組件傳來的值-->
<footer>值為：<cite title="Source Title">{{other_info}}</cite></footer>
</blockquote>
<div class="row">
<div class="col-lg-4">
<Com1></Com1>
</div>
<div class="col-lg-4">
<Com2></Com2>
</div>
<div class="col-lg-4">
<Gcom></Gcom>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 聲明一個公共vue對象(公交車)痕支，用來作為傳遞的中介
let bus = new Vue();
// 定義一個全局子組件
Vue.component('Gcom', {
data:function () {
return {
gcom_info:'Gcom組件中的信息',
// 用來接收其他組件傳來的值
other_info:''
}
},
template:`
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">Gcom全局子組件</div>
</div>
<div class="panel-body">
<blockquote>
<p>接收其他組件傳來的值</p>
<footer>值為：<cite title="Source Title">{{other_info}}</cite></footer>
</blockquote>
{{gcom_info}}<br>
<button class="btn btn-danger" v-on:click="Pass">Gcom向其他組件傳值</button>
</div>
</div>
`,
methods:{
Pass:function () {
// 向bus對象pass_value事件傳值
bus.$emit('pass_value', this.gcom_info)
}
},
created:function () {
//監(jiān)聽bus對象pass_value事件，并接受傳來的值
bus.$on('pass_value', (val)=> {
this.other_info = val
})
}
})
//定義一個局部組件com1
let Com1={
data:function () {
return {
com1_info:'Com1組件信息',
// 用來接收其他組件傳來的值
other_info:''
}
},
template:`
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Com1子組件</div>
</div>
<div class="panel-body">
<blockquote>
<p>接收其他組件傳來的值</p>
<footer>值為：<cite title="Source Title">{{other_info}}</cite></footer>
</blockquote>
{{com1_info}}<br>
<button class="btn btn-primary" v-on:click="Pass">Com1向其他組件傳值</button>
</div>
</div>
`,
methods:{
Pass:function () {
// 向bus對象pass_value事件傳值
bus.$emit('pass_value', this.com1_info)
}
},
created:function(){
//監(jiān)聽bus對象pass_value事件蛮原，并接受傳來的值
bus.$on('pass_value', (val)=> {
this.other_info = val
})
}
}
//定義一個局部組件com2
let Com2={
data:function () {
return {
com2_info:'Com2組件信息',
// 用來接收其他組件傳來的值
other_info:''
}
},
template:`
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel-title">Com2子組件</div>
</div>
<div class="panel-body">
<blockquote>
<p>接收其他組件傳來的值</p>
<footer>值為：<cite title="Source Title">{{other_info}}</cite></footer>
</blockquote>
{{com2_info}}<br>
<button class="btn btn-warning" v-on:click="Pass">Com2向其他組件傳值</button>
</div>
</div>
`,
methods:{
Pass:function () {
// 向bus對象pass_value事件傳值
bus.$emit('pass_value', this.com2_info)
}
},
created:function () {
//監(jiān)聽bus對象pass_value事件卧须，并接受傳來的值
bus.$on('pass_value', (val)=>{
this.other_info = val
})
}
}
// 父組件app
new Vue({
el:'#app',
data:function () {
return {
app_user:{
name:'孫悟空',
age:529
},
// 用來接收子組件傳來的值
other_info:''
}
},
// 掛載子組件、全局組件不用掛載
components:{
Com1,
Com2
},
created:function () {
//監(jiān)聽bus對象pass_value事件儒陨，并接受傳來的值
bus.$on('pass_value', (val)=>{
this.other_info = val;
})
}
});
</script>
</body>
</html>
效果圖如下：
image.png
