const { foo, bar } = reactive({
? ? foo: 1,
? ? bar: 2
})
// 核心解決, 使用reactive接收不會響應時更新，需要使用toRefs
const props = defineProps({
? ? drawerStatus: {
? ? ? ? type: Boolean
? ? }
})
const {drawerStatus} = toRefs(props)

<template>
? ? <el-drawer v-model="drawerStatus" title="設置部門助理" :before-close="handleClose">
? ? ? ? <div class="drawer-footer">
? ? ? ? ? ? <el-button>取消</el-button>
? ? ? ? ? ? <el-button type="primary" @click="onSubmit">確定</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)
console.log(33333333, drawerStatus)
// 新增角色數(shù)據(jù)
const formData = reactive({
})
const onSubmit = () => {
? ? handleClose()
}
const handleClose = () => {
? ? console.log('關閉抽屜')
? ? emits('upDrawerStatus', false)
}
</script>

<template>
? <div id="center" v-if="isShow">
? ? <h2><slot>my model</slot></h2>
? ? <el-button type="primary" @click="btnclose">傳遞事件</el-button>
? ? <el-button type="primary" @click="btnparents">子組件觸發(fā)父組件的方法</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",'傳遞的數(shù)據(jù)')
? ? }
? ? const btnparents=()=>{
? ? ? console.log(proxy);
? ? ? proxy.$parent.addNum()
? ? }
? ? 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">用戶詳情</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/HelloWorld.vue'
export default defineComponent({
? components:{
? ? HelloWorld
? },
? setup(props, context){
? ? console.log('context',context);
? ? const store=useStore()
? ? const {proxy}:any=getCurrentInstance()
? ? const number=ref<string|Number>(store.state.app.age)
? ? const Route=useRoute()
? ? const RouteLink=useLink
? ? const { t } = useI18n();
? ? const languageD=()=>{
? ? ? proxy.$i18n.locale=data.seleLanguage
? ? }
? ? console.log(store.state.app.allMenuList instanceof ?Array);
? ? console.log(proxy);
? // 監(jiān)聽指定基礎類型數(shù)據(jù)
? ? const addNum=()=>{
? ? ? // ?name.value=Number(name.value) +1
? ? ? name.value++
? ? }
? ? watch(name, (now, prev) => {
? ? ? ? ? console.log(now, prev, 'count')
? ? })
? ? // 監(jiān)聽reactive創(chuàng)建的響應式變量,可以直接監(jiān)聽對象，必須使用內聯(lián)函數(shù)
? ? watch(() => data.tableData, (now, prev) => {
? ? ? console.log(now, prev, 'tableData')
? ? })
? ? const myModalShow = ref(false)
? ? const myModealHide=(val:any)=>{
? ? ? myModalShow.value=false
? ? ? console.log(val);
? ? }
? ? const myModalBlock =()=>{
? ? ? myModalShow.value=true
? ? }
? ? const toDelit=():void=>{
? ? ? proxy.$router.push("/userAdminDetils")
? ? }
? ? return {
? ? ? age,
? ? ? number,
? ? ? proxy,
? ? ? store,
? ? ? name,
? ? ? addNum,
? ? ? ...toRefs(data) ,
? ? ? t,
? ? ? languageD,
? ? ? myModealHide,
? ? ? myModalBlock,
? ? ? myModalShow,
? ? ? toDelit
? ? }
? },
? created () {
? ? console.log(this.$route);
? ? console.log(this.store.state.app.age);
? ? // console.log(this.$store);//報錯
? }
})
</script>
<style>
</style>