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