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

今天小編給大家分享一下Vue3中怎么使用setup通過ref獲取子組件的屬性的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

主要依賴defineExpose

子組件通過 defineExpose將數據拋出

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

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

父組件通過給子組件綁定ref 然后結合nextTick回調函數獲取子組件的數據

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

效果圖

調用子組件的屬性和方法

今天在寫 vue3 項目時，需要在父組件里面調用子組件的方法，但是打印出來卻是這個樣子：

發現打印出來的數據啥都沒有，難道是代碼問題？

上代碼：

父組件代碼

<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("執行了fn");
};
</script>

通過翻閱 vue 文檔發現文檔中寫著一個叫 defineExpose 的 api，是這樣介紹的：

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

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

son 組件代碼修改后：

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

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

然后就可以在控制臺看到我們在控制臺打印出了子組件上變量和方法，然后就可以進行調用了

以上就是“Vue3中怎么使用setup通過ref獲取子組件的屬性”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。