defineExpose

一，前言

1.在vue3的setup中，组件默认是关闭的，对一个子组件使用ref，不能获取任何在 <script setup> 中声明的绑定。

2.defineExpose是编译宏，用于显式地指定在 <script setup> 组件中要暴露出去的属性

二，defineExpose使用

1.defineExpose是一个函数，接受要暴露的属性对象

import { ref } from 'vue'

const number =ref(1)
const submit =()=>{}

defineExpose({
	number,
	submit,
	word:'expose'
})

三，注意事项

1.当父组件通过模板引用ref的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

2.当组件中包含<script setup> 和普通<script > 时，<script >中定义的数据和方法也不会被暴露出来