《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>