<! DOCTYPE html><html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Communication between non-parent and child components</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<! $emit- $emit- $emit- $emit- $emit
	<div id="app">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>

	 <template id="a">
		<div>A component: {{name}}<button type="button" @click="send">Send the data to the C component</button>
		</div>
	 </template>
	 <template id="b">
		<div>B component: {{age}}<button type="button" @click="send">Send the data to the C component</button>
		</div>
	 </template>

	 <template id="c">
		<div>
			<h3>C component: {{name1}}, {{age}}</h3>
		</div>
	</template>

	<script>

	var Event = new Vue();
		
	var A={
			template:'#a'.data(){
				return {
					name:'tom'}},methods: {send(){
					Event.$emit('data-a'.this.name)
				}
			}
		}
		var B={
			template:'#b'.data(){
				return {
					age:20}},methods: {send(){
					Event.$emit('data-b'.this.age)
				}
			}
		}
		var C={
			template:'#c'.data(){
				return {
					name1:' '.age:' '}},mounted(){ // Execute after template compilation is complete
				Event.$on('data-a'.name= >{
					this.name1 = name
				})
				Event.$on('data-b'.age= >{
					this.age = age
				})
			}
		}


		var vm=new Vue({
			el:'#app'.components: {'my-a':A,
				'my-b':B,
				'my-c':C
			}
		});	
	</script>
</body>
</html>
Copy the code
<! DOCTYPE html><html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Communication between non-parent and child components</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<! $emit- $emit- $emit- $emit- $emit
	<div id="app">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>

	 <template id="a">
		<div>A component: {{name}}<button type="button" @click="send">Send the data to the C component</button>
		</div>
	 </template>
	 <template id="b">
		<div>B component: {{age}}<button type="button" @click="send">Send the data to the C component</button>
		</div>
	 </template>

	 <template id="c">
		<div>
			<h3>C component: {{name1}}, {{age}}</h3>
		</div>
	</template>

	<script>

	// var Event = new Vue();
		
	var A={
			template:'#a'.data(){
				return {
					name:'tom'}},methods: {send(){
					vm.$emit('data-a'.this.name)
				}
			}
		}
		var B={
			template:'#b'.data(){
				return {
					age:20}},methods: {send(){
					vm.$emit('data-b'.this.age)
				}
			}
		}
		var C={
			template:'#c'.data(){
				return {
					name1:' '.age:' '}},mounted(){ // Execute after template compilation is complete
			  this.$nextTick(() = >{
				  console.log(vm);
				  vm.$on('data-a'.name= >{
					this.name1 = name
					})
					vm.$on('data-b'.age= >{
						this.age = age
					})
				})
			
			}
		}


		var vm=new Vue({
			el:'#app'.components: {'my-a':A,
				'my-b':B,
				'my-c':C
			}

		});	
	</script>
</body>
</html>
Copy the code