我要评论需求：
父子组件使用<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子组件属性内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论