前言
A与B,B与C,B与D属于父子关系,A与C属于隔代(可能是多待)
方法一、props/$emit
1.父组件向子组件传值
例子:父组件Home.vue像子组件homeSon.vue传递一个users的数组[‘jery’,‘job’,‘jjx’]
//父组件使用v-bind:users绑定数据
<template>
<div class="home">
<son23 v-bind:users="users2"></son23>
</div>
</template>
<script>
import son23 from '@/views/homeSon.vue'
export default {
name: 'parentVue',
data() {
return {
users2:['jery','job','jjx']
}
},
components: {
son23
}
}
</script>
//子组件通过props接收
//props:{
//type:Array,
//required:true
//}
<template>
<div>
子组件dddddddddddddd
<ul>
<li v-for="(item,index) in users">
<span>{{item}}</span>
</li>
</ul>
<grandSon ></grandSon >
</div>
</template>
<script>
import grandSon from '@/views/GrandSon .vue'
export default {
name: 'LanlanGrandSon',
data() {
return {
data: ''
}
},
components: {
grandSon
},
props:{
users:{
type:Array,
required:true
}
}
}
</script>
备注:
父亲组件通过v-bind绑定数据,子组件通过props来接收数据。
组件中的数据的形式有三中:data,props,computed
2.子组件向父组件传值(通过事件方式)
例子:子组件homeSon.vue向父组件Home.vue传递一段文字’我是儿子你是父亲’
//子组件绑定事件@click="changeText"
//this.$emit('changeTextParent','我是儿子你是父亲')
<template>
<div>
<div @click="changeText">子组件dddddddddd</div>
</div>
</template>
<script>
export default {
name: 'LanlanGrandSon',
data() {
return {
data: '90'
}
},
methods:{
changeText(){
this.$emit('changeTextParent','我是儿子你是父亲')
}
}
}
//父亲组件v-on:changeTextParent='updataText'
//接收参数updataText(text_){
// this.textT=text_
// }
<template>
<div class="home">
<son23 v-on:changeTextParent='updataText' ></son23>
<p>{{textT}}</p>
</div>
</template>
<script>
import son23 from '@/views/Son.vue'
export default {
name: 'parentVue',
data() {
return {
textT:''
}
},
components: {
son23
},
methods:{
updataText(text_){
this.textT=text_
}
}
}
</script>
方法二、$emit/$on
在Vue中实现兄弟组件的通讯也有几种方法
1)父组件允当两个子组件之间的中间件(中继)
2)使用EventBus(事件总线),它允许两个子组件之间直接通讯,而不需要涉及父组件。
1.中继
让兄弟组件通过一个共同的父组件彼此通讯
首先创建ParentCard组件:
//ParentCard.vue
<template>
<brother :msgSon="msgSon" @brotherSaid="msgDaughter($event)"></brother>
<sister :msgDaughter="msgDaughter" @sisterSaid="msgSon($event)"></sister>
</template>
<script>
import Brother from './Brother';
import Sister from './Sister'
export default {
name: 'ParentCard',
data: () => ({
theCardTitle: '父组件',
msgDaughter:'',
msgSon:''
}),
components: {
Brother,
Sister
},
methods: {
msgDaughter(msg) {
this.msgDaughter= msg;
},
msgSon(msg) {
this.msgSon= msg;
}
}
};
</script>
创建Sister组件:
//Sister.vue
<template>
<p class="message-text">我是Sister组件</p>
<button @click="msgBrother" class="btn">给哥哥发消息</button>
</template>
<script>
export default {
name: 'Sister',
props: ['msgDaughter'],
data: () => ({
theCardTitle: '子组件2'
}),
methods: {
msgBrother() {
this.$emit('sisterSaid', '妈妈说,该做作业了!')
}
}
}
</script>
接着创建BrotherCard组件:
//Brother.vue
<template>
<p class="message-text">我是Brother组件</p>
<button @click="msgSister" class="btn">给妹妹发消息 </button>
</template>
<script>
export default {
name: 'Brother',
props: ['msgSon'],
data: () => ({
theCardTitle: '子组件1'
}),
methods: {
msgSister() {
this.$emit('brotherSaid', '妈妈说,该做作业了!')
}
}
}
</script>
接下来简单看看这个实现过程。
Sister通过ParentCard与Brother通讯
首先来看Sister是如何与Brother通讯的。从示例中可以看出,他们两之间的通讯是通过其父组件ParentCard作为中间媒介来进行通讯的。
我们在Sister组件的中为msgBrother()方法设置了一个@click事件来监听该事件。
<button @click="msgBrother" class="btn">给哥哥发消息</button>
当用户点击Sister中的“给哥哥发消息”将会触发msgBrother()方法。在这个方法中,将发出一个sisterSaid事件,并且把妈妈说,该做作业了!(_)!!!信息发送出去。
msgBrother() {
this.$emit('sisterSaid', '妈妈说,该做作业了!')
}
在ParentCard的中定制了一个@sisterSaid事件侦听器
,它触发了msgSon()
方法。所以父组件在这两个兄弟组件之间起到了传递的作用。
<sister :msgDaughter="msgDaughter" @sisterSaid="msgSon($event)"></sister>
另外在ParentCard组件中声明了msgSon()
方法,该方法接受上面发送的自定义事件,并将其设置为msgson属性。
msgSon(msg) {
this.msgson = msg;
}
这样一来,ParentCard组件中msgson 就由空字符串变成了妈妈说,该做作业了!。
接着在ParentCard组件自定义标签通过:msgSon="msgson"的方式将msgson属性绑定到。
<brother :msgSon="msgSon" @brotherSaid="msgDaughter($event)"></brother>
这个时候在Brother组件中设置props的属性值为msgSon。这样就可以访问源自于Sister组件的数据,并且该数据在Brother中显示。
props: ["msgSon"]
2.事件总线