Vue two peer components pass values

$emit(‘ functions ‘,’ functions ‘); $emit(‘ functions ‘,’ functions ‘); $emit(‘ functions ‘,’ functions ‘); The child component uses $emit to trigger the parent component’s function, but the two sibling components do this to each other

<div id='app'>
	<children1></children1>
	<children2></children2>
</div>
<script>
 	var children1 = {};
 	var children2 = {};
	var vm = new Vue({
		el:'#app'.components:{
			children1,
			children2
		}
	})
</script>
Copy the code

Now we are going to pass the data from the children1 component to the Children2 component primarily using $on() and $emit() in the vUE instance

	<div id='app'>
		<children1></children1>
		<children2></children2>
	</div>
	<script>
	    var Event = new Vue({}); // Create a vue instance to use as a medium for passing values
	 	var children1 = {
			template:'
       

         < button@click ='send'> Click on me to send data to the children2 component  
       
'.data(){
				return {
					msg:'I'm sending the data for Children2'}},methods: {send(){ 
					Event.$emit('go'.this.msg) 
				}
			}
		};
	 	var children2 = {
			template:` < div > < h2 > from children1 component receives value: {{msg1}} < / h2 > < / div > `.data(){
				return{
					msg1:' '}},created(){
				Event.$on('go'.(v) = > { // Must use the arrow function because this
					this.msg1 = v; })}};var vm = new Vue({
			el:'#app'.components:{
				children1,
				children2
			}
		})
</script>
Copy the code

The chilren1 component sends data usingEvent.$emit()The Chilren2 component wants to receive data to useEevent.$on()