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

news2024/11/25 20:36:53

选项式写法

使用选项式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>