[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>

总结

1. 向外暴露的时候变量会自动解包，比如上面子组件的name:ref<String>暴露到父组件的时候自动变成了name:String.

2. 注：defineExpose一定要在变量和方法声明定义之后再使用。

   不知道以后会不会有修改，不过在2023/02/17，如果defineExpose写在变量和函数前面，那么浏览器的控制台会输出很多警告，并且最终将该页面卡死。