vue3+ts，组件通信，父传子之defineProps，子传父之defineEmits
前言一、父传子之defineProps1.首先父组件代码中引入子组件2.子组件代码通过defineProps接收 二、子传父，父组件被动接收之defineEmits1.子组件定义denfineEmits1.父组件中的子组件接收事件或数据 总结
前言
我们知道在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()function initData() { 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}>()//②当触发相应的条件时给父组件传递数据function save(){ 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'//自定义方法，接收来自子组件的数据function getChangeInfo(data: Record<string, string>){ //这里做其他操作}//自定义方法,接收到指令后关闭表单function closeElForm(){//做其他操作}</script>总结
好好学习，天天向上。