vue3中的defineExpose使用示例教程
簡(jiǎn)介
使用 <script setup> 的組件是默認(rèn)關(guān)閉的————即通過(guò)模板引用或者 $parent 鏈獲取到的組件的公開實(shí)例，不會(huì)暴露在任何在 <script setup> 中聲明的綁定
換句話說(shuō)，如果一個(gè)子組件使用的是選項(xiàng)式 API 或沒(méi)有使用 <script setup> ，被引用的組件實(shí)例和該子組件的 this 完全一致，這意味著父組件對(duì)子組件的每一個(gè)屬性和方法都有完全的訪問(wèn)權(quán)。
但是如果使用了 <script setup> 的組件，這種組件是默認(rèn)私有的，也就是一個(gè)父組件無(wú)法訪問(wèn)到一個(gè)使用了 <script setup> 的子組件中的任何東西，除非子組件在其中通過(guò) defineExpose 宏顯式暴露：
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
// 像 defineExpose 這樣的編譯器宏不需要導(dǎo)入
defineExpose({
a,
b
})
</script>舉個(gè)栗子
父組件獲取子組件的實(shí)例，去觸發(fā)子組件實(shí)例身上的方法。
父組件
<template>
<div class="p-20 pb-0 mb-4">
<div>父組件</div>
<button class="mt-4" @click="handleClick">點(diǎn)我聚焦</button>
</div>
<Child ref="childeRef"></Child>
</template>
<script setup lang="ts">
import { ref, provide, onMounted } from "vue";
import Child from "./Child.vue";
const childeRef = ref<HTMLInputElement | null>(null);
const handleClick = () => {
childeRef.value?.inputRef?.focus();
};
</script>子組件
<template>
<hr />
<div class="p-20 pt-4">
<div>子組件</div>
<input
ref="inputRef"
placeholder="請(qǐng)輸入哈哈哈哈"
class="border-1 mt-4"
/><br />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const inputRef = ref<HTMLInputElement | null>(null);
defineExpose({
inputRef,
});
</script>參考文檔：
https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component
到此這篇關(guān)于vue3中的defineExpose使用的文章就介紹到這了,更多相關(guān)vue3 defineExpose使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決
這篇文章主要介紹了Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關(guān)于Vue v2.4中新增的$attrs及$listeners屬性的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
解決element-ui中Popconfirm氣泡確認(rèn)框的事件不生效問(wèn)題
這篇文章主要介紹了解決element-ui中Popconfirm氣泡確認(rèn)框的事件不生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue打包c(diǎn)hunk-vendors.js文件過(guò)大導(dǎo)致頁(yè)面加載緩慢的解決
這篇文章主要介紹了vue打包c(diǎn)hunk-vendors.js文件過(guò)大導(dǎo)致頁(yè)面加載緩慢的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue中使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用video.js實(shí)現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
詳解vue表單驗(yàn)證組件 v-verify-plugin
本篇文章主要介紹了詳解vue表單驗(yàn)證組件 v-verify-plugin，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
vue3-pinia-ts項(xiàng)目中的使用示例詳解
這篇文章主要介紹了vue3-pinia-ts項(xiàng)目中的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08