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

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

• 前言
• 一、父传子之defineProps
• • 1.首先父组件代码中引入子组件
  • 2.子组件代码通过defineProps接收
  • 二、子传父，父组件被动接收之defineEmits
  • • 1.子组件定义denfineEmits
    • 1.父组件中的子组件接收事件或数据
    • 总结

      ---

      前言

      我们知道在vue3中组件之间传数据传值的方法大概分为三种。

      第一种：父组件给子组件传值，子组件通过defineProps接收数据。

      第二种：子组件给父组件传值，父组件被动接收，在子组件通过defineEmits定义事件进行数据传递。

      第三种：子组件给父组件传值，父组件主动接收，在子组件通过defineExpose暴露方法把数据或者某方法暴露给父组件。

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

      ---

      一、父传子之defineProps

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

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

      代码如下：

      //父组件代码Father.vue  import Son from './Son.vue'import { ref } from 'vue'const currentId = ref(6)

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

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

      代码如下：

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

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

      1.子组件定义denfineEmits

      代码如下（示例）：

      //子组件代码Son.vue  //写组件信息代码//①定义defineEmitsconst emit = defineEmits   //带数据的，父组件后面接收数据处理数据  (event: 'getSonInfo', data: Record()//②当触发相应的条件时给父组件传递数据function save(){  if(true){  //传递  emit('getSonInfo',data)  }else{  emit('closeModel',data)  }}

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

      代码如下（示例）：

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

      //父组件Father.vue  import Son from './Son.vue'//自定义方法，接收来自子组件的数据function getChangeInfo(data: Record){  //这里做其他操作}//自定义方法,接收到指令后关闭表单function closeElForm(){//做其他操作}

      ---

      总结

      好好学习，天天向上。