The solution to the problem of not being able to obtain child component properties using ref

need:

Parent-child components use <script setup> syntax sugar, and the parent component accesses the child component's internal properties or events by defining refs for the child component.

Key points:

In child components, the setup syntax sugar needs to be used to expose the properties and methods to be read separately, otherwise the access will fail; if the child component uses the setup() function, the parent component can directly access its properties through ref, and there is no need to use defineExpose to expose the data.

Subcomponents: src/components/

&lt;template&gt;
  &lt;el-dialog v-model="dialogTableVisible" title="Shipping address" width="800"&gt;
    &lt;el-table :data="gridData"&gt;
      &lt;el-table-column property="date" label="Date" width="150" /&gt;
      &lt;el-table-column property="name" label="Name" width="200" /&gt;
      &lt;el-table-column property="address" label="Address" /&gt;
    &lt;/el-table&gt;
  &lt;/el-dialog&gt;
&lt;/template&gt;
 
&lt;script lang="ts" setup&gt;
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"
  }
];
 
 
// Expose the data for parent component to calldefineExpose({
  dialogTableVisible
});
&lt;/script&gt;

Parent component: src/

<script setup lang="ts">
import BaseInfoDialog from "./components/";
import { ref } from "vue";
 
const childComponentRef = ref(null);
 
const logChildMessage = () => {
  if () {
     = 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>

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

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'
 
// /config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', ))
    }
  }
})

This is the end of this article about the solution to the problem of not being able to obtain the properties of the child component by using ref in vue3. For more related content of the properties of the child component by vue3 ref, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!