Communication between Vue components
lead to problems
An important idea of Vue is component-based development. When it comes to component-based development, the reusability of structural style and behavior is improved. After the components are written, how to transfer data between components becomes a problem...
Vue components can be nested with each other, just like a box with two small boxes inside, so that three fathers and children and two brothers can be formed
Then I will use a small demo written by myself to explain how the data communicates. Here I set up a scene, the story of father and son and future daughter-in-law~
story begins
There is a father, a son, and the son has an object. Here, the level is explained. The father is the parent-level component, and the son and the object are components of the same level. The story is going on... The father gave the son a house, and the son told the partner that we will be home after this. Subject expresses gratitude to father.
story analysis
- Father gives his son a house:
父传子(use technology:属性绑定) - The son told the object that we have a house:
同级别组件之间传递数据(using technology:$busglobal event bus) - The subject expresses his gratitude to his father:
子传父(Technology used:自定义事件)
Code
The parent component code is as follows:
<template>
<div>
<p>我是{
{
name}}</p>
<p>这是儿子对我说的话：{
{
formSon}}</p>
<p>这是儿媳妇对我说的话：{
{
formDou}}</p>
<Brother :house="house" @thanks="thanks"></Brother>
<Brother2 @thank="thank"></Brother2>
</div>
</template>
<script>
import Brother from './brother1.vue'
import Brother2 from './brother2.vue'
export default {
name: 'TodoTestFather',
data() {
return {
name:'father',
house:'这是给儿子的婚房',
formSon:'',
formDou:''
};
},
components:{
Brother,
Brother2
},
methods:{
thanks(message){
this.formSon= message
},
thank(message){
this.formDou = message
}
}
};
</script>
<style scoped>
p{
background-color: rgb(255, 71, 71);
}
</style>
son component
<template>
<div>
<p>我是老公：{
{
name}}</p>
<p>我今年：{
{
age}}岁了</p>
<p>我收到了父亲的数据：{
{
house}}</p>
<p> <button @click="thankFather">感谢父亲赠与的家</button></p>
<p>老婆对我说：{
{
fromWife}}</p>
<p><button @click="tellWife">告诉老婆咱们有房子啦</button></p>
</div>
</template>
<script>
export default {
name: 'TodoTestBrother1',
props:['house'],
data() {
return {
name:'王雷旺',
age:'22',
fromWife:''
};
},
mounted() {
this.$bus.$on('fromWife', (data)=>{
this.fromWife = data
})
},
methods: {
thankFather(){
this.$emit('thanks', '谢谢老爸的房子');
},
tellWife(){
this.$bus.$emit('formHusband','老爸给咱们了一套房子老婆')
}
},
};
</script>
<style scoped>
p{
background-color: yellow;
}
</style>
object (daughter-in-law component)
<template>
<div>
<p>我是老婆：{
{
name}}</p>
<p>我今年：{
{
age}}岁了</p>
<p><button @click="thankFather">感谢父亲赠与的家</button></p>
<p>我收到了老公的来信：{
{
formHunband}}</p>
<p><button @click="thankHusband">感谢老公</button></p>
</div>
</template>
<script>
export default {
name: 'TodoTestBrother2',
data() {
return {
name:'陈彦戈',
age:21,
formHunband:''
};
},
mounted() {
this.$bus.$on('formHusband', (data)=>{
this.formHunband = data
})
},
methods: {
thankFather(){
this.$emit('thank','谢谢爸爸，爸爸辛苦了，请喝茶')
},
thankHusband(){
this.$bus.$emit('fromWife','谢谢老公我们有家啦！')
}
},
};
</script>
<style scoped>
p{
background-color: palevioletred;
}
</style>
How to enable the global event bus
In addition, if you want to use $bus (global event bus to realize data transfer between brothers or grandchildren), then you need to enable the global event bus, the code is as follows:
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus= this //安装全局事件总线
}
})
Execution effect
Father to son: (The following is what the father said to his son)
Son to father:
Data transfer between son and object
Our family Wubai (English short) is 8 months old~
