vue3组件的props(父传子)、emits(子传父)的用法

父组件 parent.vue

<template>
    <!-- 引入子组件 自定义了parentsEmit方法和pData属性-->
   <children @parentsEmit="pEmitData" :pData="pData"></children>
   我是父组件
    我是子组件传过来：{{num}}
</template>
<script>
 import { ref } from 'vue'
   setup(){
     let pData="我是父组件"
     //接收子组件传过来的值
     let num=ref(null)
     const pEmitData=(data)=>{
        num.value=data
     }
     return{
        pData,
        num,
        pEmitData
     }
   }
</script>

子组件 children.vue

<template>
   <p>我是父组件传过来的:{{cData}}</p>
   我是子组件
   <button @click="cEmitData">点我父组件加1</button>
</template>
<script>
   props:{
     pData:{
       type:"String",
       default:""
     }
   }
   setup(props,context){
     //接收父组件传过来的值pData
      const cData=props.pData
      const cEmitData=()=>{
      //给父组件传值
        context.emit('parentsEmit',1)
      }
      return{ 
        cData,
        cEmitData
      }
   }
</script>