[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写在变量和函数前面，那么浏览器的控制台会输出很多警告，并且最终将该页面卡死。
