脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3常见组件通信之props和自定义事件

Vue3中的常见组件通信之props和自定义事件详解

 更新时间：2025年04月08日 11:11:31   作者：m0_63165331  
这篇文章主要介绍了Vue3中的常见组件通信之props和自定义事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3中的常见组件通信

概述

在vue3中常见的组件通信有props、mitt、v-model、 refs、parent、provide、inject、pinia、slot等。不同的组件关系用不同的传递方式。常见的撘配形式如下表所示。

组件关系传递方式
父传子1. props2. v-model3. $refs4. 默认插槽、具名插槽
子传父1. props2. 自定义事件3. v-model4. $parent5. 作用域插槽
祖传孙、孙传祖1. $attrs2. provide、inject
兄弟间、任意组件间1. mitt2. pinia

本文讲述props和自定义事件，其他的通信方式后面再更新。

1.props

1.1 准备父子组件

首先准备一个简单的父子组件的样式，如下是父组件代码：

<template>
  <div class="father">
    <h2>这是父组件</h2>
	<Child/>
  </div>
</template>

<script setup lang="ts" name="Father">
	//引入子组件
	import Child from './Child.vue';
	
</script>

<style scoped>
	.father{
		margin: 5px;
		background-color:rgb(205, 165, 32);
		padding: 20px;
		color: white;
	}
</style>

以下是子组件代码：

<template>
  <div class="child">
    <h2>这是子组件</h2>
  </div>
</template>

<script setup lang="ts" name="Child">

</script>

<style scoped>
	.child{
		margin: 5px;
		background-color: rgba(93, 135, 20, 0.224);
		border: 1px solid;
		border-color: white;
		box-shadow: 0 0 5px;
		padding: 10px;
		color: #000;
	}	
</style>

运行结果如下所示：

1.2 父传子通信的实现

用props实现父传子通信，可以用标签中的属性值直接传递数据，父组件代码中只需要在子组件标签上添加属性值即可，如下代码，传递两个数据：

<Child :f2CMsg="f2CMsg" :f2CObj="f2CObj"/>

定义传递的数据内容，两个数据分别是ref定义的基本类型的响应式数据和reactive定义的对象类型的响应式数据。

//引入ref和reactive
import {ref,reactive} from 'vue'

//数据，ref定义的基本类型的响应式数据
let f2CMsg =ref('你好，子组件。')

//数据，reactive定义的对象类型的响应式数据
let f2CObj = reactive({
id:"asdfg01",
name:"张三",
age:18,
detail:"这是父组件中的对象信息"
})

在子组件中需要声明接收数据props，注意接收的数据格式是数组，哪怕是只传递一个数据也要写成数组的形式。

//声明接收数据props
defineProps(['f2CMsg','f2CObj'])

子组件中在页面展示接收的数据，如下代码：

<h4>父组件传递的信息：{{ f2CMsg }}</h4>
<h4>父组件传递的对象：</h4>
<ul>
    <li>姓名：{{f2CObj.name}}</li>
    <li>年龄：{{f2CObj.age}}</li>
    <li>详情：{{f2CObj.detail}}</li>
</ul>

然后运行结果如下：

1.3 子传父通信的实现

用props实现子传父的通信需要父组件先向子组件传递一个函数，然后传递的数据以参数的形式传递给函数，父组件中先定义子传父的数据变量和函数或者方法如下：

//定义子传父的数据变量
let c2FMsg = ref('')
//定义方法传递给子组件
function getMsg(value:string){
    c2FMsg.value = value
}

在标签中把方法传给子组件：

<Child :f2CMsg="f2CMsg" :f2CObj="f2CObj" :sendMsg="getMsg"/>

在子组件中接收数据,并定义数据内容：

defineProps(['f2CMsg','f2CObj','sendMsg'])
let c2FMsg = ref('你好，父组件。')

在子组件中设置一个按钮，给按钮绑定点击事件，点击事件触发sendMsg方法，并传递参数：

<button @click="sendMsg(c2FMsg)">点我向父组件传递信息</button>

现在数据应该已经传递给了父组件，在父组件可以用如下代码展示：

<h4 v-show="c2FMsg">子组件传递的信息：{{ c2FMsg }}</h4>

运行结果如下：

点击按钮后运行结果如下：

至此我们已经用props实现了子传父的通信功能。当然子传父也可以传递对象。此处不再展示。如下是完整代码：

父组件中的代码：

<template>
  <div class="father">
    <h2>这是父组件</h2>
	<h4 v-show="c2FMsg">子组件传递的信息：{{ c2FMsg }}</h4>	
	<Child :f2CMsg="f2CMsg" :f2CObj="f2CObj" :sendMsg="getMsg"/>	
  </div>
</template>

<script setup lang="ts" name="Father">
	//引入子组件
	import Child from './Child.vue';
	//引入ref和reactive
	import {ref,reactive} from 'vue'
	
	//数据，ref定义的基本类型的响应式数据
	let f2CMsg =ref('你好，子组件。')

	//数据，reactive定义的对象类型的响应式数据
	let f2CObj = reactive({
		id:"asdfg01",
		name:"张三",
		age:18,
		detail:"这是父组件中的对象信息"
	})
	
	//定义子传父的数据变量
	let c2FMsg = ref('')
	
	//定义方法传递给子组件
	function getMsg(value:string){
		c2FMsg.value = value		
	}
</script>

<style scoped>
	.father{
		margin: 5px;
		background-color:rgb(205, 165, 32);
		padding: 20px;
		color: white;
	}
</style>

子组件的代码：

<template>
  <div class="child">
    <h2>这是子组件</h2>
	<h4>父组件传递的信息：{{ f2CMsg }}</h4>
	<h4>父组件传递的对象：</h4>
	<ul>
		<li>姓名：{{f2CObj.name}}</li>
		<li>年龄：{{f2CObj.age}}</li>
		<li>详情：{{f2CObj.detail}}</li>
	</ul>
	<button @click="sendMsg(c2FMsg )">点我向父组件传递信息</button>
  </div>
</template>

<script setup lang="ts" name="Child">
import { ref,reactive } from 'vue';

//声明接收数据props
defineProps(['f2CMsg','f2CObj','sendMsg'])

let c2FMsg = ref('你好，父组件。')

</script>

<style scoped>
	.child{
		margin: 5px;
		background-color: rgba(93, 135, 20, 0.224);
		border: 1px solid;
		border-color: white;
		box-shadow: 0 0 5px;
		padding: 10px;
		color: #000;
	}	
</style>

1.4 小结

用props实现父子通信的步骤是这样的：

  • 父传子：父组件中定义传递的数据–>标签中用属性值直接传递数据–>子组件中声明接收数据–>用插值语法展示数据。
  • 子传父: 父组件先定义接收数据的变量–>父组件中定义函数–>将函数传递给子组件–>子组件中声明接收数据，接收的数据为函数–>子组件中定义传递的数据–>子组件中调用接收的函数，将定义的要传递的数据作为参数进行传递–>父组件中收到数据，可以在页面中展示。

最后总结如下：

  • 父传子：标签中的属性值是非函数
  • 子传父：标签中的属性值是函数

2. 自定义事件

  • 自定义事件通常用于子传父，需要注意在原生事件中事件名是特定的，比如click，keyup等，在自定义事件中事件名是任意的；
  • 在原生事件中事件对象event是包含事件相关信息的对象（‘pageX‘、‘pageY‘、‘target‘、‘keyCode‘）
  • 在定义事件中事件对象event是调用emit所提供的数据，可以是任意类型。

2.1 准备父子组件

父子组件代码与样式与本文中1.1中的完全相同，此处不再赘述。

2.2 自定义事件实现子传父通信

首先在子组件中定义要传递的数据，此次依然已字符串为例，如下代码：

let c2FMsg = ref('你好，父组件。')

然后在父组件中定义接收的数据变量，并声明函数，用来保存接收的数据。

let c2FMsg = ref('')

//声明函数saveMsg，用来保存接收的数据
function saveMsg(value:string){
    c2FMsg.value = value
}

之后给子组件绑定自定义事件,事件名为send-message，同时将函数saveMsg传进去，注意自定义事件名的命名规范官方建议采用肉串形式的命名方式。

<!-- 给子组件绑定自定义事件 -->
<Child @send-message="saveMsg"/>

在子组件中需要声明事件

//声明事件
let emit = defineEmits(['send-message'])

触发事件的代码如下：

emit('send-message')

只要在子组件中写出上面触发事件的代码，就可以实现子传父的通信，这次以子组件挂载3秒后自动触发事件为例，如下代码：

//组件挂载3秒后触发事件
onMounted(()=>{
	setTimeout(()=>{
		//触发事件send-message，并传c2FMsg
		emit('send-message',c2FMsg)
	},3000)
})

此时已经实现了子传父的通信，最后在父组件中展示出来，如下代码：

<h3 v-show="c2FMsg">子组件传递的信息：{{ c2FMsg }}</h3>

最后运行页面效果如下，在刚启动页面是如下效果：

3秒钟之后看下的效果如下图所示：

以下是完整代码：

父组件代码：

<template>
	<div class="father">
	  <h2>这是父组件</h2>
	  <h3 v-show="c2FMsg">子组件传递的信息：{{ c2FMsg }}</h3>
	  <!-- 给子组件绑定自定义事件 -->
	  <Child @send-message="saveMsg"/>
	</div>
  </template>
  
  <script setup lang="ts" name="Father">
	  //引入子组件
	  import Child from './Child.vue';
	  import { ref } from 'vue';

	  let c2FMsg = ref('')
  		
  	//声明函数，用来保存接收的数据
  	function saveMsg(value:string){
		c2FMsg.value = value
	}
	  
  </script>
  
  <style scoped>
	  .father{
		  margin: 5px;
		  background-color:rgb(205, 165, 32);
		  padding: 20px;
		  color: white;
	  }
  </style>

以下是子组件代码：

<template>
	<div class="child">
	  <h2>这是子组件</h2>
	</div>
  </template>
  
  <script setup lang="ts" name="Child">
	
	import {ref,onMounted} from 'vue'

	let c2FMsg = ref('你好，父组件。')
  	//声明事件
	let emit = defineEmits(['send-message'])

	//组件挂载3秒后触发事件
	onMounted(()=>{
		setTimeout(()=>{
			//触发事件send-message，并传c2FMsg
			emit('send-message',c2FMsg)
		},3000)
	})
  
  </script>
  
  <style scoped>
	  .child{
		  margin: 5px;
		  background-color: rgba(93, 135, 20, 0.224);
		  border: 1px solid;
		  border-color: white;
		  box-shadow: 0 0 5px;
		  padding: 10px;
		  color: #000;
	  }	
  </style>

总结

以上便是自定义事件的基本用法，在实际开发中是比较常用的用来实现子传父的通信方式。

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue向后台传数组数据,springboot接收vue传的数组数据实例

    Vue向后台传数组数据,springboot接收vue传的数组数据实例

    这篇文章主要介绍了Vue向后台传数组数据,springboot接收vue传的数组数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue的模板语法以及实战案例

    Vue的模板语法以及实战案例

    Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据,下面这篇文章主要给大家介绍了关于Vue的模板语法以及案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 详解vue-router基本使用

    详解vue-router基本使用

    本篇文章主要介绍了详解vue-router基本使用，详细的介绍了vue-router的概念和用法，有兴趣的可以了解一下。
    2017-04-04
  • el-upload大文件切片上传实现示例详解

    el-upload大文件切片上传实现示例详解

    这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • Vue3 通过作用域插槽实现树形菜单嵌套组件

    Vue3 通过作用域插槽实现树形菜单嵌套组件

    这篇文章主要为大家介绍了Vue3 通过作用域插槽实现树形菜单嵌套组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 一文轻松理解Vuex

    一文轻松理解Vuex

    这篇文章主要介绍了Vuex及其使用方法，感兴趣的同学，可以参考下
    2021-04-04
  • vue+elementUI多表单同时提交及表单校验最新解决方案

    vue+elementUI多表单同时提交及表单校验最新解决方案

    假设有一个页面,需要分三步填写三个表单,且每个表单位于独立的组件中,然后最后保存同时提交,如何进行表单必填项校验,下面小编给大家介绍vue+elementUI多表单同时提交及表单校验最新解决方案,感兴趣的朋友一起看看吧
    2024-03-03
  • Vue3+ElementPlus 表单组件的封装实例

    Vue3+ElementPlus 表单组件的封装实例

    这篇文章主要介绍了Vue3+ElementPlus 表单组件的封装实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • 解决webpack+Vue引入iView找不到字体文件的问题

    解决webpack+Vue引入iView找不到字体文件的问题

    今天小编就为大家分享一篇解决webpack+Vue引入iView找不到字体文件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue项目中vue-i18n和element-ui国际化开发实现过程

    vue项目中vue-i18n和element-ui国际化开发实现过程

    这篇文章主要介绍了vue项目中vue-i18n和element-ui国际化开发实现过程，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04

最新评论