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