解决vue3使用ref 获取不到子组件属性问题

需求：

父子组件使用<script setup>语法糖，父组件通过给子组件定义ref访问子组件内部属性或事件。

关键点：

子组件中，setup语法糖需要用defineExpose把要读取的属性和方法单独暴露出去，否则会访问失败；如果子组件使用setup()函数，则在父组件通过ref可以直接访问其属性，不需要用defineExpose暴露数据。

子组件：src/components/BaseInfoDialog.vue

<template><el-dialog v-model="dialogTableVisible" title="Shipping address" width="800"><el-table :data="gridData"><el-table-column property="date" label="Date" width="150" /><el-table-column property="name" label="Name" width="200" /><el-table-column property="address" label="Address" /></el-table></el-dialog>
</template><script lang="ts" setup>
import { ref, defineExpose } from "vue";const dialogTableVisible = ref(false);const gridData = [{date: "2016-05-02",name: "John Smith",address: "No.1518,  Jinshajiang Road, Putuo District"},{date: "2016-05-04",name: "John Smith",address: "No.1518,  Jinshajiang Road, Putuo District"},{date: "2016-05-01",name: "John Smith",address: "No.1518,  Jinshajiang Road, Putuo District"},{date: "2016-05-03",name: "John Smith",address: "No.1518,  Jinshajiang Road, Putuo District"}
];// 把数据暴露出去供父组件调用
defineExpose({dialogTableVisible
});
</script>

父组件：src/App.vue

<script setup lang="ts">
import BaseInfoDialog from "./components/BaseInfoDialog.vue";
import { ref } from "vue";const childComponentRef = ref(null);const logChildMessage = () => {if (childComponentRef.value) {childComponentRef.value.dialogTableVisible = true;}
};
</script><template><div><div><BaseInfoDialog ref="childComponentRef" /></div><div><el-button type="primary" @click="logChildMessage">open dialog</el-button></div></div>
</template><style scoped></style>

package.json

{"name": "latest-vue3-ts","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite","build": "run-p type-check \"build-only {@}\" --","preview": "vite preview","build-only": "vite build","type-check": "vue-tsc --build --force"},"dependencies": {"element-plus": "^2.7.6","vue": "^3.4.29"},"devDependencies": {"@tsconfig/node20": "^20.1.4","@types/node": "^20.14.5","@vitejs/plugin-vue": "^5.0.5","@vue/tsconfig": "^0.5.1","npm-run-all2": "^6.2.0","typescript": "~5.4.0","unplugin-auto-import": "^0.17.6","unplugin-vue-components": "^0.27.0","vite": "^5.3.1","vite-plugin-vue-setup-extend": "^0.4.0","vue-tsc": "^2.0.21"}
}

vite.config.ts

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),VueSetupExtend(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})