VUE之组件间通信

VUE基础

组件通信

• 组件通信在vue中是一个很重要的知识点，我们经常会遇到这样的情景：当父组件某些值改变时，需要同时改变子组件中的值；或者子组件中的值改变时，需要触发父组件的更新；还有可能是兄弟组件间的传值。

1. 父子组件通信

1.1 父组件向子组件传值

• 在子组件中添加一个自定义属性，属性值为需要通知子组件的值。在子组件中可以使用props进行接收

父组件中：

// 父组件
<template>
	<Children :cityId="cityId"></Children>
</template>
<script>
export default {
    data(){
    	return {  
    		cityId: 10000
		}
	}
}
</script>

子组件：

// 子组件
<template>
	<div>
        {{cityId}}
    </div>
</template>
<script>
export default {
    props: {
        cityId: {
            default: '',
            type: Number
        }
    }
}
</script>

1.2 子组件向父组件传值

• 要实现子组件向父组件的传值，需要通过监听事件来进行。

父组件

// 父组件
<template>
	<Children :cityId="cityId" @callParent="callParent"></Children>
</template>
<script>
import Children from "./Children";
export default {
    name: "parent",
    data(){
    	return {  
    		cityId: 10000
		}
	},
    methods: {
        callParent: function(e){
            // e是子组件向父组件传递的数据。
            console.log(e); // "This is your son"
        }
    }
}
</script>

子组件：

// 子组件
<template>
	<div @click="solveClick">
        {{cityId}}
    </div>
</template>
<script>
export default {
    name: 'Children',
    data() {
        message: "This is your son"
    },
    props: {
        cityId: {
            default: '',
            type: Number
        }
    },
    methods: {
        solveClick: function() {
        	this.$emit('callParent',this.message)
    	}
    }
}
</script>

2. 兄弟组件通信

• 兄弟组件之间不能直接进行通信，需要借助一个中间者才能进行通信，最简单的做法是先将值传递给父组件，再由父组件传递给其他子组件。但是最常见的做法是使用EventBus(即一个中间的Vue实例)进行值的转发。

2.1 通过父组件通信

// 父组件
<template>
	<div class="parentNode">
        <Children1 @fromChildren1="fromChildren1" :mf2="mf2"></Children1>
        <Children2 @fromChildren2="fromChildren2" :mf1="mf1"></Children2>
    </div>
</template>
<script>
import Children1 from './Children1';
import Children2 from './Children2';

export default {
    data() {
        mf1: "",
        mf2: ""
    },
    methods: {
        fromChildren1: function(message) {
            this.mf1 = message;
        },
        fromChildren2: function(message) {
            this.mf2 = message;
        }
    }
}
</script>

// 子组件1
<template>
	<div>
        children2 say:{{mf2}}
    </div>
	<botton @click="sendMessage">Send Message To childern2!</botton>
</template>
<script>
export default {
    name: 'Children',
    data() {
        return {
            myMessage: "This is children1!"
        }
    },
    props: {
        mf2: {
            type: String
        }
    },
    methods: {
        sendMessage: function() {
        	this.$emit('fromChildren1',this.myMessage)
    	}
    }
}
</script>

// 子组件2
<template>
	<div>
        children1 say:{{mf1}}
    </div>
	<botton @click="sendMessage">Send Message To childern1!</botton>
</template>
<script>
export default {
    name: 'Children',
    data() {
        return {
            myMessage: "This is children2!"
        }
    },
    props: {
        mf1: {
            type: String
        }
    },
    methods: {
        sendMessage: function() {
        	this.$emit('fromChildren2',this.myMessage)
    	}
    }
}
</script>

2.2 使用EventBus通信

• 在main.js中定义一个新的Vue实例，并在需要进行通信的两个兄弟组件中引入这个对象。并在组件的created()声明周期中使用eventBus.$on对事件进行监听。

// main.js
import Vue from 'vue'
import App from './App'
 
export const eventBus = new Vue()
 
new Vue({
    el: '#app',
    render: h => h(App)
})

子组件1：

// 子组件1
<template>
	<div>
        children2 say:{{mf2}}
    </div>
	<botton @click="sendMessage">Send Message To childern2!</botton>
</template>
<script>
import { eventBus } from '../main'
export default {
    name: 'Children',
    data() {
        return{
            myMessage: "This is children1!",
            mf2: undefined
        }   
    },
    methods: {
        sendMessage: function() {
        	this.$emit('fromChildren1',this.myMessage)
    	}
    },
    created() {
        eventBus.$on('fromChildren2',(message) => {
            this.mf2 = message
        })
    }
}
</script>

子组件2：

// 子组件2
<template>
	<div>
        children1 say:{{mf1}}
    </div>
	<botton @click="sendMessage">Send Message To childern1!</botton>
</template>
<script>
import { eventBus } from '../main'
export default {
    name: 'Children',
    data() {
        return {
           myMessage: "This is children2!",
            mf1: undefined
        }
    },
    methods: {
        sendMessage: function() {
        	this.$emit('fromChildren2',this.myMessage)
    	}
    },
    created() {
        eventBus.$on('fromChildren1',(message) => {
            this.mf1 = message;
        })
    }
}
</script>