vue3怎么使用defineExpose

這篇文章主要介紹了vue3怎么使用defineExpose的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue3怎么使用defineExpose文章都會有所收獲，下面我們一起來看看吧。

可以通過 defineExpose 編譯器宏來顯式指定在 <script setup> 組件中要暴露出去的屬性：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

當父組件通過模板引用的方式獲取到當前組件的實例，獲取到的實例會像這樣 { a: number, b: number } (ref 會和在普通實例中一樣被自動解包)

例子

父組件

<template>
  <h3>defineExpose 使用 父組件</h3>
  <child ref="getChildData"></child>

</template>

<script setup lang="ts">
import Child from "@/components/exposeChildren.vue"
import { ref,onMounted,toRaw} from 'vue'
    // 文檔說setup寫在script上組件是關閉的
    // 也就是說父組件使用getChildData.xxx訪問不到子組件的數據
    // 此時我們需要用defineExpose把需要傳遞的數據暴露出去，這樣外部才能訪問到
    // 同理也可以接收外部傳來的值

const getChildData = ref(null)
const obj = {
    name: 'alan',
    desc: '大笨蛋',
    age: 18
}

const cc= getChildData.value?.['num']
console.log(cc) //undefined,此時還未找到子組件暴露的數據

onMounted(()=>{
  //獲取子組件的data數據，什么時候獲取根據自己業務來
  const bb:any= getChildData.value?.['updata']
  console.log(bb()) // 123,這時候得到的是子組件的初始值，因為還未給子組件傳遞數據
  const a:any= getChildData.value?.['getData'] 
  a(obj) ////給子組件傳遞數據
  const b:any= getChildData.value?.['updata']
  const c= getChildData.value?.['num']
  console.log(toRaw(b())) // {name: 'alan', desc: '大笨蛋', age: 18} ,這里得到的是個proxy,所以需要toRaw()方法轉成對象 
  console.log(c) // 666
})


</script>
<style scoped>
</style>

子組件

<template>
  <h3>defineExpose 使用 子組件</h3>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'

const data = ref(123)
const num = ref(666)
defineExpose({
    updata(){
        return data.value //暴露出去父組件可以拿到data的數據.此時值為123
    },
    getData(res:any){
        data.value = res //父組件傳遞來的值賦值給data
        // 此時的data變成了 Proxy
        //     {
        //     name: 'alan',
        //     desc: '大笨蛋',
        //     age: 18
        //     }
    },
    num
})
</script>
<style scoped>
</style>

關于“vue3怎么使用defineExpose”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue3怎么使用defineExpose”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。