快捷導(dǎo)航

vue3使用ref 獲取不到子組件屬性問(wèn)題的解決辦法

更新時(shí)間：2024年06月25日 10:44:54 作者：duansamve

父子組件使用<script setup>語(yǔ)法糖,父組件通過(guò)給子組件定義ref訪問(wèn)子組件內(nèi)部屬性或事件,本文給大家介紹了解決vue3使用ref 獲取不到子組件屬性問(wèn)題,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下

需求：

父子組件使用<script setup>語(yǔ)法糖，父組件通過(guò)給子組件定義ref訪問(wèn)子組件內(nèi)部屬性或事件。

關(guān)鍵點(diǎn)：

子組件中，setup語(yǔ)法糖需要用defineExpose把要讀取的屬性和方法單獨(dú)暴露出去，否則會(huì)訪問(wèn)失敗；如果子組件使用setup()函數(shù)，則在父組件通過(guò)ref可以直接訪問(wèn)其屬性，不需要用defineExpose暴露數(shù)據(jù)。

子組件：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"
  }
];
 
 
// 把數(shù)據(jù)暴露出去供父組件調(diào)用
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))
    }
  }
})

到此這篇關(guān)于vue3使用ref 獲取不到子組件屬性問(wèn)題的解決辦法的文章就介紹到這了,更多相關(guān)vue3 ref子組件屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: