vue组件间通信

无敌CV工程师

已于 2023-08-17 16:29:42 修改

阅读量401

点赞数 31

分类专栏： vue基础文章标签： vue.js 前端 javascript

于 2023-08-17 16:10:16 首次发布

本文链接：https://blog.csdn.net/2202_75345049/article/details/132341671

版权

vue基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue组件间的三种主要通信方式：prop属性传递、子组件向父组件的自定义事件以及全局事件总线。详细讲解了prop的使用、自定义事件的绑定和触发，以及如何利用全局事件总线进行任意组件间的通信。

摘要由CSDN通过智能技术生成

前言

vue是数据驱动视图更新的框架, 我们平时开发，都会把页面不同模块拆分成一个一个vue组件，所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？
首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式。

一般我们分为如下关系：

父子组件之间通信
非父子组件之间通信(兄弟组件、隔代关系组件等)

Prop

类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

在脚手架中使用

简单使用

App.vue中代码

<template>
	<div>
		<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

<script>
//引入子组件
	import Student from './components/Student'

	export default {
		name:'App',
		//配置子组件
		components:{Student}
	}
</script>

子组件中代码

//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}

复杂使用（传递数据及方法）

App.vue中代码

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/> 
			</div>
		</div>
	</div>
</template>

<script>
	import MyList from './components/MyList'
	export default {
		name:'App',
		components:{MyList},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:[
					{id:'001',title:'抽烟',done:true},
					{id:'002',title:'喝酒',done:false},
					{id:'003',title:'开车',done:true}
				]
			}
		},
		methods: {
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//删除一个todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			}
		}
	}
</script>

组件的自定义事件（子传给父）

介绍

1.一种组件间通信的方式，适用于：子组件 ===> 父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3.绑定自定义事件：

        第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

        第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}
//   若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4.触发自定义事件：this.$emit(‘atguigu’,数据)

5.解绑自定义事件this.$off(‘atguigu’)

6.组件上也可以绑定原生DOM事件，需要使用native修饰符。

7.注意：通过this. $re f s . xxx .$ on(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

使用

App.vue

<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>


		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- <Student @aaa="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<Student ref="student" @click.native="show"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			this.$refs.student.$on('aaa',this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('aaa',this.getStudentName) //绑定自定义事件（一次性）
		},
	}
</script>

子组件

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>当前求和为：{{number}}</h2>
		<button @click="add">点我number++</button>
		<button @click="sendStudentlName">把学生名给App</button>
		<button @click="unbind">解绑aaa事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
				number:0
			}
		},
		methods: {
			add(){
				console.log('add回调被调用了')
				this.number++
			},
			sendStudentlName(){
				//触发Student组件实例身上的aaa事件
				this.$emit('aaa',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},
			unbind(){
				this.$off('aaa') //解绑一个自定义事件
				// this.$off(['aaa','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
			}
		},
	}
</script>

全局事件总线（任意组件间）

介绍

1.一种组件间通信的方式，适用于任意组件间通信。

2.安装全局事件总线：
在main.js里面

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

3.使用事件总线：

        1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

        2.提供数据：this.$bus.$emit('xxxx',数据)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

使用

a组件

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

b组件

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>

消息订阅与发布（任意组件间）

介绍

1.一种组件间通信的方式，适用于任意组件间通信。

2.使用步骤：

安装pubsub：npm i pubsub-js

引入: import pubsub from ‘pubsub-js’

接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

3提供数据：pubsub.publish(‘xxx’,数据)

4.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

使用

a组件

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				// this.$bus.$emit('hello',this.name)
				pubsub.publish('hello',666)
			}
		},
	}
</script>

b组件

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data() {
			return {
				
			}
		},
		mounted() {
			// console.log('School',this)
			/* this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			}) */
			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
				console.log(this)
				// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		},
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>