《Vue3 踩坑》expose 和 defineExpose 暴露属性或方法注意事项

选项式写法

使用 选项式API - 状态选项 - expose 一定要注意：

接下来，进一步看示例说明：

设置 expose

• 仅显示列出的属性/方法才能被父组件调用；
• 代码第 2 行，父组件可访问属性 a 和 方法 myFunc01，不可访问属性 b 和 方法 myFunc02；

export default {expose: ['a', 'myFunc01'],data() {return {a: 1,b: 2}},methods: {myFunc01(){//...},myFunc02(){//...}}
}
</script>

不设置expose

• 默认全部属性/方法都可被父组件调用；
• 父组件可访问 a、b、 myFunc01，myFunc02 等全部属性/方法！我就在这里犯错了…

export default {data() {return {a: 1,b: 2}},methods: {myFunc01(){//...},myFunc02(){//...}}
}

组合式写法

设置 defineExpose

• 组合式写法默认所有属性和方法都是私有的，需要使用 defineExpose 宏显示暴露；
• 代码 15-18 行，父组件只能调用属性 a 和方法 myFunc01；
• defineExpose 无需引入，在<script setup>中可直接使用；

<script setup>
import { ref } from 'vue'const a = ref(1)
const b = ref(2)function myFunc01(){//...
}function myFunc02(){//...
}defineExpose({a,myFunc01
})
</script>