快捷導(dǎo)航

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

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

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

setup通過(guò)ref獲取子組件的屬性

子組件通過(guò) 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>

父組件通過(guò)給子組件綁定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)用子組件的屬性和方法

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

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

上代碼：

父組件代碼

<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>

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

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

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

son 組件代碼修改后：

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

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

然后就可以在控制臺(tái)看到我們?cè)诳刂婆_(tái)打印出了子組件上變量和方法，然后就可以進(jìn)行調(diào)用了

over，問(wèn)題解決！

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

您可能感興趣的文章:

相關(guān)文章

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