Vue3 使用expose让父组件直接修改子组件的值

最近写Vue3项目的时候无意间知道expose这个语法糖，expose可以使父组件直接去修改子组件的数据，那么废话不多说下面演示一下🙂。

子组件代码

<template>
    <div>
        <div>我是子组件</div>
        <div>count: {{count}}</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: "Hello",
    setup(_, { expose }) {
        const count = ref(0);

        expose({
            count,
        })

        return {
            count,
        }
    }
});
</script>

<style scoped lang="scss">

</style>

 父组件代码

<template>
    <div>
        <div>我是父组件</div>
        <button @click="handleClick">点击子组件count+1</button>
        <hr />
        <Hello ref="helloRef" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Hello from "../../components/Hello.vue";

export default defineComponent({
    components: {
        Hello
    },
    setup() {
        const helloRef = ref();

        /** 点击子组件count+1的操作 */
        const handleClick = () => {
            helloRef.value.count += 1;
        }

        return {
            helloRef,
            handleClick,
        }
    }
});
</script>

<style scoped lang="scss">

</style>

 当点击父组件的按钮时 - 子组件的count变量就会 + 1；

使用 expose 就可以在不用props的情况下去修改子组件的数据了😆！