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>

總結

1. 向外暴露的時候變量會自動解包，比如上面子組件的name:ref<String>暴露到父組件的時候自動變成了name:String.

2. 注：defineExpose一定要在變量和方法聲明定義之后再使用。

   不知道以后會不會有修改，不過在2023/02/17，如果defineExpose寫在變量和函數前面，那么瀏覽器的控制臺會輸出很多警告，并且最終將該頁面卡死。