快捷導(dǎo)航

vue3中的defineExpose使用示例教程

更新時(shí)間：2023年09月27日 09:40:29 作者：楊貴妃會飛飛飛

這篇文章主要介紹了vue3中的defineExpose使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

簡介

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

換句話說，如果一個(gè)子組件使用的是選項(xiàng)式 API 或沒有使用 <script setup> ，被引用的組件實(shí)例和該子組件的 this 完全一致，這意味著父組件對子組件的每一個(gè)屬性和方法都有完全的訪問權(quán)。

但是如果使用了 <script setup> 的組件，這種組件是默認(rèn)私有的，也就是一個(gè)父組件無法訪問到一個(gè)使用了 <script setup> 的子組件中的任何東西，除非子組件在其中通過 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="請輸入哈哈哈哈"
      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項(xiàng)目打包到服務(wù)器后請求接口報(bào)錯(cuò)404的解決
這篇文章主要介紹了Vue項(xiàng)目打包到服務(wù)器后請求接口報(bào)錯(cuò)404的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關(guān)于Vue v2.4中新增的$attrs及$listeners屬性的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
解決element-ui中Popconfirm氣泡確認(rèn)框的事件不生效問題
這篇文章主要介紹了解決element-ui中Popconfirm氣泡確認(rèn)框的事件不生效問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue打包c(diǎn)hunk-vendors.js文件過大導(dǎo)致頁面加載緩慢的解決
這篇文章主要介紹了vue打包c(diǎn)hunk-vendors.js文件過大導(dǎo)致頁面加載緩慢的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue組件中傳值EventBus的使用及注意事項(xiàng)說明
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項(xiàng)說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vite?vue3下配置history模式路由的步驟記錄
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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è)參考。一起跟隨小編過來看看吧
2017-04-04
vue3-pinia-ts項(xiàng)目中的使用示例詳解
這篇文章主要介紹了vue3-pinia-ts項(xiàng)目中的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08