解决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))
    }
  }
})
相关推荐
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_748254884 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
苹果醋36 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
关你西红柿子6 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根6 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
m0_748256567 小时前
Vue - axios的使用
前端·javascript·vue.js
慢知行8 小时前
Vite 构建 Vue3 组件库之路:工程基础搭建与目录结构优化
前端·vue.js
阿克苏的滚滚馕8 小时前
alioss 批量断点续传 开箱即用
javascript·vue.js
Simaoya8 小时前
【vue】圆环呼吸灯闪烁效果(模拟扭蛋机出口处灯光)
javascript·css·vue.js