vue3.0 How to modify the value passed by the parent component in the child component

const { foo, bar } = reactive({
    foo: 1,
    bar: 2
})
// Core solution, use reactive to receive updates when it will not respond, and you need to use toRefsconst props = defineProps({
    drawerStatus: {
        type: Boolean
    }
})
const {drawerStatus} = toRefs(props)

<template>
    <el-drawer v-model="drawerStatus" title="Set up a department assistant" :before-close="handleClose">
        <div class="drawer-footer">
            <el-button>Cancel</el-button>
            <el-button type="primary" @click="onSubmit">Sure</el-button>
        </div>
    </el-drawer>
    
</template>

<script setup>
import {reactive, toRefs} from 'vue'
const props = defineProps({
    drawerStatus: {
        type: Boolean
    }
})
const emits = defineEmits(['upDrawerStatus'])
const {drawerStatus} = toRefs(props)
(33333333, drawerStatus)
// Add new role dataconst formData = reactive({
})
const onSubmit = () => {
    handleClose()
}
const handleClose = () => {
    ('Close the drawer')
    emits('upDrawerStatus', false)
}
</script>

<template>
  <div  v-if="isShow">
    <h2><slot>my model</slot></h2>
    <el-button type="primary" @click="btnclose">Pass events</el-button>
    <el-button type="primary" @click="btnparents">How to trigger a parent component in child component</el-button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,getCurrentInstance
} from "vue";
export default defineComponent({
  props: {
    isShow:{
      type:Boolean,
      default:true
    }
  },
  emits: {
    "my-close": null,
  },
  setup(props, {emit}) {
    const {proxy}:any=getCurrentInstance()
    const btnclose = () => {
      emit("my-close",'Transferred data')
    }
    const btnparents=()=>{
      (proxy);
      proxy.$()
    }
    return {
      btnclose,
      proxy,
      btnparents
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<template>
  <HelloWorld @my-close="myModealHide" :isShow="myModalShow">solt</HelloWorld>
  <el-button @click="myModalBlock">my modal2</el-button>
  <el-button type="primary" @click="toDelit">User details</el-button>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, watch,ref,getCurrentInstance,reactive,nextTick ,toRefs} from 'vue'
import {
  useStore,
  mapState,
} from 'vuex'
import {useRoute,useRouter,useLink,UseLinkOptions} from "vue-router"
import { useI18n } from "vue-i18n";
import {data} from "@/utils/TypeState"
import HelloWorld from '@/components/'
export default defineComponent({
  components:{
    HelloWorld
  },
  setup(props, context){
    ('context',context);
    const store=useStore()
    const {proxy}:any=getCurrentInstance()
    const number=ref<string|Number>()
    const Route=useRoute()
    const RouteLink=useLink
    const { t } = useI18n();
    const languageD=()=>{
      proxy.$=
    }
    ( instanceof  Array);
    (proxy);
  // Listen to the specified basic type data    const addNum=()=>{
      //  =Number() +1
      ++
    }
    watch(name, (now, prev) => {
          (now, prev, 'count')
    })
    // Listen to reactive variables created by reactive, you can directly listen to objects, and you must use inline functions    watch(() => , (now, prev) => {
      (now, prev, 'tableData')
    })
    const myModalShow = ref(false)
    const myModealHide=(val:any)=>{
      =false
      (val);
    }
    const myModalBlock =()=>{
      =true
    }
    const toDelit=():void=>{
      proxy.$("/userAdminDetils")
    }
    return {
      age,
      number,
      proxy,
      store,
      name,
      addNum,
      ...toRefs(data) ,
      t,
      languageD,
      myModealHide,
      myModalBlock,
      myModalShow,
      toDelit
    }
  },
  created () {
    (this.$route);
    ();
    // (this.$store);// Report an error  }
})
</script>
<style>
</style>