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()
function initData() {
  console.log(props.id)
  //=> 6 ,运行结果打印一个6，这样就在子组件获取到父组件传来的数据了
}
</script>

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

1.子组件定义denfineEmits

代码如下（示例）：

//子组件代码Son.vue
<template>
  //写组件信息代码
</template>
<script setup lang="ts">
//①定义defineEmits
const 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>

---

总结

好好学习，天天向上。