[Vue3] 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寫在變量和函數前面,那么瀏覽器的控制臺會輸出很多警告,并且最終將該頁面卡死。


浙公網安備 33010602011771號