【vue3 新特性 expose 使用与讲解】options和composition api的defineExpose案例
expose类型:Array<string>vue3新特性,如果是options api类型的组件,不声明 expose 时,默认暴露当前组件实例的全部内容,声明了 expose 选项, expose 数组内标记的才会暴露。(expose:[]则什么都不暴露,注意这个问题。也可以利用这个特性提高组件使用的规范。)<script setup>setup语法糖的情况下,默认是封闭的,需要获取当前组件里
·
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,任何前端问题,究其本质,值得讨论,研究与学习。
更多推荐
已为社区贡献10条内容
所有评论(0)