【vue3 新特性 expose 使用与讲解】options和composition api的defineExpose案例

expose

• 类型：Array<string>

vue3新特性，如果是options api类型的组件，不声明 expose 时，默认暴露当前组件实例的全部内容，声明了 expose 选项， expose 数组内标记的才会暴露。（expose:[]则什么都不暴露，注意这个问题。也可以利用这个特性提高组件使用的规范。）

export default defineComponent({
  expose:['nameA',...],// 可以 expose 当前实例的任何内容
  methods:{
    nameA(){}
  }
})

---

<script setup> setup语法糖的情况下，默认是封闭的，需要获取当前组件里的内容的话，必须显式expose出去 

<script lang='ts' setup>
import {ref} from 'vue';
let refData = ref('寒蝉鸣泣之时')
defineExpose({
  refData,
})
</script>

TS类型：

import { ref,Ref } from "vue";
//> defineExpose
interface exFace {
  ex1:Ref<string>,
  ex2?:number
}
let ex1 = ref('1')
let exObj:exFace = {
  ex1,
}
// 源码类型: const defineExpose: (exposed?: Record<string, any>) => void
defineExpose(exObj)

---

QQ交流群：5229 76012  ，欢迎来玩。

聚焦vue3，但不限于vue，任何前端问题，究其本质，值得讨论，研究与学习。