(精华2020年5月6日更新) vue教程篇 非父子组件相互传参(发布订阅)

第三个vue实例实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件间的通信</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!-- A组件和 B组件向C组件发送数据  ,在C组件里负责订阅 监听 ,AB组件负责发送 $emit-->
	<div id="app">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>

	 <template id="a">
		<div>
			A组件:{
     {
     name}}
			<button type="button" @click="send">将数据发送给C组件</button>
		</div>
	 </template>
	 <template id="b">
		<div>
			B组件:{
     {
     age}}
			<button type="button" @click="send">将数据发送给C组件</button>
		</div>
	 </template>

	 <template id="c">
		<div>
			<h3>C组件:
				{
     {
     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(){
      //在模板编译完成后执行
				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>

当前实例实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件间的通信</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!-- A组件和 B组件向C组件发送数据  ,在C组件里负责订阅 监听 ,AB组件负责发送 $emit-->
	<div id="app">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>

	 <template id="a">
		<div>
			A组件:{
     {
     name}}
			<button type="button" @click="send">将数据发送给C组件</button>
		</div>
	 </template>
	 <template id="b">
		<div>
			B组件:{
     {
     age}}
			<button type="button" @click="send">将数据发送给C组件</button>
		</div>
	 </template>

	 <template id="c">
		<div>
			<h3>C组件:

				{
     {
     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(){
      //在模板编译完成后执行
			  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>

你可能感兴趣的:((持续更新)vue基础篇,vue.js)