defineExpose要在變數和方法聲明定義之後再使用，否則瀏覽器的控制台會輸出很多警告，並且最終將該頁面卡死。 ...
[Vue3] defineExpose要在方法聲明定義以後使用
Vue3中的setup預設是封閉的，如果要從子組件向父組件暴露屬性和方法，需要用到defineExpose.
和defineProps, defineEmits一樣，這三個函數都是內置的，不需要import.
不過defineProps, defineEmits都會返回一個實例，而defineExpose是無返回值的.
const props = defineProps({})
const emit = defineEmits([])
defineExpose({})
defineExpose的使用
子組件Child.vue
<template>
{{ name }}
</template>
<script setup>
import { ref } from 'vue'
const name = ref("Nicholas.")
const sayName = ()=>{
console.log("my name is "+name.value)
}
defineExpose({
name,
sayName
});
</script>
父組件Father.vue
<template>
<Child ref="child"></Child>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const child = ref(null)
onMounted(()=>{
console.log(child.value.name) // "Nicholas"
child.value.sayName() // "my name is Nicholas"
})
</script>
總結
-
向外暴露的時候變數會自動解包，比如上面子組件的
name:ref<String>暴露到父組件的時候自動變成了name:String. -
註：defineExpose一定要在變數和方法聲明定義之後再使用。
不知道以後會不會有修改，不過在
2023/02/17，如果defineExpose寫在變數和函數前面，那麼瀏覽器的控制台會輸出很多警告，並且最終將該頁面卡死。
