一,前言

1.在vue3setup中,组件默认是关闭的,对一个子组件使用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 >中定义的数据和方法也不会被暴露出来

Logo

前往低代码交流专区

更多推荐