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
      
        //写组件信息代码
      
      
      //①定义defineEmits
      const 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(){
      //做其他操作
      }
      
      

      ---

      总结

      好好学习，天天向上。