在小型項目當中墅诡，如果不考慮
VueX，組件之間的通信該如何處理桐智，接下來我們創(chuàng)建parentschildAchildB三個組件演示如何傳遞與接收
parents組件:
<template>
<div>
<childA/>
<childB/>
</div>
</template>
<script>
export default {
components: {
childA: () => import('@/components/childA'),
childB: () => import('@/components/childB'),
},
}
</script>
childA組件:
<template>
<div>
<h2>Hello,我是ChildA組件</h2>
</div>
</template>
<script>
export default {
}
</script>
childB組件:
<template>
<div>
<h2>Hello,我是ChildB組件</h2>
</div>
</template>
<script>
export default {
}
</script>
運行效果如下
image.png
1.父組件傳遞子組件末早，子組件接收父組件
這里我想
parents組件給ChildA組件傳一個Hi , ChildA! 我是你爸爸! ,
parents組件給ChildB組件傳一個Hi , ChildB! 我也是你爸爸!
那么該怎么處理？這里子組件在父組件中作為標簽引入说庭，通過設置標簽的屬性傳遞數據然磷，在子組件用props接收
注這里的props可接收類型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
這里我們設置一個標簽屬性message
parents組件:
<template>
<div>
<childA :message="toChildA"/>
<childB :message="toChildB"/>
</div>
</template>
<script>
export default {
components: {
childA: () => import('@/components/childA'),
childB: () => import('@/components/childB'),
},
data(){
return{
toChildA:'Hi , ChildA! 我是你爸爸!',
toChildB:'Hi , ChildB! 我也是你爸爸!',
}
}
}
</script>
childA組件:
<template>
<div>
<h2>Hello,我是ChildA組件</h2>
<div>來自parents組件的信息：{{message}}</div>
</div>
</template>
<script>
export default {
props:{
message:String
}
}
</script>
childB組件:
<template>
<div>
<h2>Hello,我是ChildB組件</h2>
<div>來自parents組件的信息：{{message}}</div>
</div>
</template>
<script>
export default {
props:{
message:String
}
}
</script>
運行效果如下
image.png
2.子組件傳遞父組件，父組件接收子組件
子組件通過$emit觸發(fā)事件刊驴，父組件通過v-on接收觸發(fā)事件
通俗的來說
childA組件:$emit('A觸發(fā)的事件名稱')那么相應的parents組件就需要接收同樣的事件
<childA @A觸發(fā)的事件名稱="parents組件用于接收的方法" />
parents組件:
<template>
<div>
<childA @from_child_a="receiveChildA" :message="toChildA"/>
<i>這是ChildA發(fā)過來的消息 : {{childAMsg}}</i>
<childB @from_child_b="receiveChildB" :message="toChildB"/>
<i>這是ChildB發(fā)過來的消息 : {{childBMsg}}</i>
</div>
</template>
<script>
export default {
components: {
childA: () => import('@/components/childA'),
childB: () => import('@/components/childB'),
},
data(){
return{
toChildA:'Hi , ChildA! 我是你爸爸!',
toChildB:'Hi , ChildB! 我也是你爸爸!',
childAMsg:'',
childBMsg:''
}
},
methods:{
receiveChildA(pramas){
this.childAMsg = pramas
},
receiveChildB(pramas){
this.childBMsg = pramas
}
}
}
</script>
childA組件:
<template>
<div>
<h2>Hello,我是ChildA組件</h2>
<div>來自parents組件的信息：{{message}}</div>
</div>
</template>
<script>
export default {
props:{
message:String
},
mounted(){
this.$emit('from_child_a','Hi,爸爸 , 我是ChildA')
}
}
</script>
childB組件:
<template>
<div>
<h2>Hello,我是ChildB組件</h2>
<div>來自parents組件的信息：{{message}}</div>
</div>
</template>
<script>
export default {
props:{
message:String
},
mounted(){
this.$emit('from_child_b','Hi,爸爸 , 我是ChildB')
}
}
</script>
運行效果如下
image.png
3.平行兄弟組件之間的數據傳遞
上面我們講了子傳父刃滓，父傳子悼瘾，子接收父移斩，父接收子劳秋，那么平行的兩個組件之間我們該怎么通信呢？這里引入一個概念‘總線’攻礼，你可以把它理解為全局的
window业踢，但是又不同于window，它的作用就好像十字路口礁扮，就是我不管你什么方向的車知举，你都可以從我這里過，而我既可以接受你的信號太伊，我也能把你的信號傳遞給別人雇锡。
具體怎么實現的？
這里我們新建一個bus.js ,新建一個Vue對象并且掛載注入到vue對象里僚焦，在main.js引用
import Vue from 'vue'
export const Bus = new Vue()
export default Vue => {
const bus = Bus;
Vue.bus = bus;
Vue.prototype.$bus = bus
}
main.js引入使用,這樣全局就注冊了一個bus總線
注意：注冊的總線事件要在組件銷毀時卸載锰提，否則會多次掛載，造成觸發(fā)一次但多個響應的情況
import Bus from './utils/bus'
Vue.use(Bus)
ChildA組件：
<template>
<div>
<h2>Hello,我是ChildA組件</h2>
<div>來自parents組件的信息：{{message}}</div>
<button @click="sendMsgToB">我要給ChildB發(fā)送信息</button>
</div>
</template>
<script>
export default {
props:{
message:String
},
mounted(){
this.sendToParent()
},
methods:{
sendToParent(){
this.$emit('from_child_a','Hi,爸爸 , 我是ChildA');
},
sendMsgToB(){
this.$bus.$emit('from_bro_child_a','Hi,兄弟芳悲，我是ChildA'+Math.random())
}
},
beforeDestroy () {
this.$bus.$off('from_bro_child_a')
}
}
</script>
ChildB組件：
<template>
<div>
<h2>Hello,我是ChildB組件</h2>
<div>來自parents組件的信息：{{message}}</div>
<div style="color: red">來自兄弟ChildA組件的信息：{{fromBroChildAMsg}}</div>
</div>
</template>
<script>
export default {
props:{
message:String
},
data(){
return{
fromBroChildAMsg:null
}
},
mounted(){
this.sendToParent()
this.watchBus()
},
methods:{
sendToParent(){
this.$emit('from_child_b','Hi,爸爸 , 我是ChildB');
},
watchBus(){
let that = this;
this.$bus.$on('from_bro_child_a', (pramas) => {
that.fromBroChildAMsg= pramas
})
}
}
}
</script>
運行效果如下
image.png
