vue3+ts，组件通信，父传子之defineProps，子传父之defineEmits

vue3+ts，组件通信，父传子之defineProps，子传父之defineEmits

前言

我们知道在vue3中组件之间传数据传值的方法大概分为三种。
第一种：父组件给子组件传值，子组件通过defineProps接收数据。
第二种：子组件给父组件传值，父组件被动接收，在子组件通过defineEmits定义事件进行数据传递。
第三种：子组件给父组件传值，父组件主动接收，在子组件通过defineExpose暴露方法把数据或者某方法暴露给父组件。

这篇文章主要是针对第一和第二种传值方法进行详细记录说明，第三种传值方法在另一篇博客有详细的记录说明，顺便附上网址：链接: 子传父，父组件主动接收之defineExpose。

一、父传子之defineProps

开始接触到前端开发的时候，父子组件之间的通信是不可避免的，第一种比较简单的父组件数据传给子组件，下面来看看实现的步骤。

1.首先父组件代码中引入子组件

代码如下：

//父组件代码Father.vue<template><son :id="currentId"/></template><script setup lang="ts">import Son from'./Son.vue'import{ ref }from'vue'const currentId =ref(6)</script>

父组件中的子组件son.vue通过es6的语法“：”给组件传数据，因为const currentId = ref(6)这条数据本身是属于父组件father.vue的，所以又称父组件给子组件传递数据。

2.子组件代码通过defineProps接收

代码如下：

//子组件代码Son.vue<template>//写组件信息代码</template><script setup lang="ts">const props =defineProps({
  id:{
    type: String,default:''}})//初始化initData()functioninitData(){console.log(props.id)//=> 6 ,运行结果打印一个6，这样就在子组件获取到父组件传来的数据了}</script>

二、子传父，父组件被动接收之defineEmits

1.子组件定义denfineEmits

代码如下（示例）：

//子组件代码Son.vue<template>//写组件信息代码</template><script setup lang="ts">//①定义defineEmitsconst emit =defineEmits<{//带数据的，父组件后面接收数据处理数据(event:'getSonInfo', data: Record<string,string>):void//不带数据的，父组件收到指令做别的操作(event:'closeModel'):void}>()//②当触发相应的条件时给父组件传递数据functionsave(){if(true){//传递emit('getSonInfo',data)}else{emit('closeModel',data)}}</script>

1.父组件中的子组件接收事件或数据

代码如下（示例）：

父组件中的子组件通过**@事件名=“自定义方法”**接收

//父组件Father.vue<template><son @get-son-info="getChangeInfo":close-model="closeElForm"/></template><script setup lang="ts">import Son from'./Son.vue'//自定义方法，接收来自子组件的数据functiongetChangeInfo(data: Record<string,string>){//这里做其他操作}//自定义方法,接收到指令后关闭表单functioncloseElForm(){//做其他操作}</script>

总结

好好学习，天天向上。