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

需求：

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

关键点：

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

子组件：src/components/BaseInfoDialog.vue

javascript 复制代码

<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

javascript 复制代码

<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

javascript 复制代码

{
  "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

javascript 复制代码

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))
    }
  }
})