一,前言
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 >
中定义的数据和方法也不会被暴露出来