vue3中子组件通过defineProps获取父组件传的值，通过defineEmits事件修改值

一、父组件

//父组件
<template>
  <div class="box">
    <h1>父组件</h1>
    <hr />
    <Child info="子组件" @changeName='getName' name="name"></Child>
  </div>
</template>
<script setup lang="ts">
import Child from "./Child.vue";
import {
    ref } from "vue";

let name= ref('yyy');

const getName = (pyload)=>{
   
consoe.log('获取子组件传来的值',pyload)

}
</script>

<style scoped>
.wrap{
   
  width: 100vw;
  height:100;
}
</style>

二、子组件

<template>
  <div class="box">
    <h1>子组件</h1>
    <h3>姓名：{
   {
   name}}</h3>
    <button @clikc='onChange'>修改名称</button>
  </div>
</template>
<script setup lang="ts">
import {
    ref, defineProps，defineEmits} from 'vue'
const props = defineProps(['name']); 
const emit= defineEmits(['changeName'])
const onChange = ()=>{
   
	emit('changeName','修改的名称')
}

</script>