vue3使用ref 获取不到子组件属性问题的解决办法
更新时间:2024年06月25日 10:44:54 作者:duansamve
父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问子组件内部属性或事件,本文给大家介绍了解决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))
}
}
})
到此这篇关于vue3使用ref 获取不到子组件属性问题的解决办法的文章就介绍到这了,更多相关vue3 ref子组件属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
-
这篇文章主要介绍了详解基于mpvue微信小程序下载远程图片到本地解决思路,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05
-
本文主要介绍了vue-nuxt 登录鉴权的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-12-12
-
在最近新起的项目中,用到了较新的技术栈vue3.2+vite+ts,跟着网上的写法渐渐上手了,下面这篇文章主要给大家介绍了关于vue3如何加载本地图片等静态资源的相关资料,需要的朋友可以参考下2023-04-04
-
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,分享到脚本之家平台,对vue移动端项目缓存问题实践记录感兴趣的朋友跟随小编一起看看吧2018-10-10
-
这篇文章主要介绍了vue中关于template报错等问题的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04
-
本文主要介绍了vue-element-admin开发教程(v4.0.0之前),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-04-04
-
vue的v-on与v-bind,v-on就是用于绑定事件的,下面这篇文章主要给大家介绍了关于vue3常用的指令之v-bind和v-on指令用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
-
Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测,在官方还没给出新方法之前,我们先实现一个基于Proxy的变化检测。感兴趣的朋友跟随小编一起看看吧2019-06-06
-
本文给大家分享一段详细的代码给大家介绍Vue+Vux项目实践思路,需要的朋友可以参考下2017-11-11
-
<keep-alive> 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中,下面这篇文章主要给大家介绍了关于vue3利用keepAlive缓存页面的相关资料,需要的朋友可以参考下2022-11-11
最新评论