快捷導(dǎo)航

Vue3中使用setup通過ref獲取子組件的屬性

更新時(shí)間：2022年07月28日 09:34:40 作者：小火車況且況且

這篇文章主要介紹了Vue3中使用setup通過ref獲取子組件的屬性，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

setup通過ref獲取子組件的屬性

子組件通過 defineExpose將數(shù)據(jù)拋出

<template>
? <div class="test-com">testCom</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const testText = ref('我是子組件的數(shù)據(jù)')
defineExpose({
? text: testText
})
</script>

父組件通過給子組件綁定ref 然后結(jié)合nextTick回調(diào)函數(shù)獲取子組件的數(shù)據(jù)

<template>
? <div>
? ? <TestCom ref="getTestComRef" />
? ? {{ showText }}
? </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import TestCom from './components/TestCom.vue'
const getTestComRef = ref<{
? text: string
}>()
const showText = ref()
nextTick(() => {
? showText.value = getTestComRef.value?.text
})
</script>

效果圖

調(diào)用子組件的屬性和方法

今天在寫 vue3 項(xiàng)目時(shí)，需要在父組件里面調(diào)用子組件的方法，但是打印出來卻是這個(gè)樣子：

發(fā)現(xiàn)打印出來的數(shù)據(jù)啥都沒有，難道是代碼問題？

上代碼：

父組件代碼

<template>
? <son ref="sonRef"></son>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Son from "./view/son.vue";
const sonRef = ref(null);
onMounted(() => {
? console.log(sonRef.value);
});
</script>

son 組件代碼

<template>
? <div>子組件</div>
</template>

<script setup>
const a = "555";
const fn = () => {
? console.log("執(zhí)行了fn");
};
</script>

通過翻閱 vue 文檔發(fā)現(xiàn)文檔中寫著一個(gè)叫 defineExpose 的 api，是這樣介紹的：

使用 <script setup> 的組件是默認(rèn)關(guān)閉的，也即通過模板 ref 或者 $parent 鏈獲取到的組件的公開實(shí)例，不會暴露任何在 <script setup> 中聲明的綁定。

大致意思就是：使用 script setup 語法糖的組件，不會往外暴露任何在該語法糖中聲明的變量，需要使用defineExpose 語法來將你想暴露出去的變量和方法暴露出去

son 組件代碼修改后：

<template>
? <div>子組件</div>
</template>

<script setup>
const a = "555";
const fn = () => {
? console.log("執(zhí)行了fn");
};
defineExpose({
? a,
? fn,
});
</script>

然后就可以在控制臺看到我們在控制臺打印出了子組件上變量和方法，然后就可以進(jìn)行調(diào)用了

over，問題解決！

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明，具有很好的參考價(jià)值，希望大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
羊了個(gè)羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本
這篇文章主要為大家介紹了羊了個(gè)羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue項(xiàng)目部署在Spring Boot出現(xiàn)頁面空白問題的解決方案
這篇文章主要介紹了Vue項(xiàng)目部署在Spring Boot出現(xiàn)頁面空白問題的解決方案,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
vue 實(shí)現(xiàn)數(shù)字滾動增加效果的實(shí)例代碼
最近做了個(gè)項(xiàng)目需要做數(shù)字滾動增加的效果，剛開始接到這個(gè)項(xiàng)目還真是懵了，后來發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡單的，下面小編給大家?guī)砹藇ue 實(shí)現(xiàn)數(shù)字滾動增加效果的實(shí)例代碼，需要的朋友參考下吧
2018-07-07
vue自定義指令和動態(tài)路由實(shí)現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動態(tài)路由實(shí)現(xiàn)權(quán)限控制的方法，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-08-08
詳解Vue.js中引入圖片路徑的幾種方式
這篇文章主要介紹了Vue.js中引入圖片路徑的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Vue中的Computed實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue中的Computed實(shí)現(xiàn)原理,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue事件總線怎么用
這篇文章主要介紹了Vue事件總線的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。
2023-04-04
Vue router-view和router-link的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue router-view和router-link的實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03