Vue3暴露子组件数据

    有些时候需要在父组件中操作子组件的数据，使用props属性传递又不便，此时可以使用defineExpose()函数将子组件数据暴露到对应DOM节点上，父组件通过获取子组件的DOM拿到子组件的数据

子组件数据暴露

通过向defineExpose()函数传递一个对象，将要暴露的数据写进去即可（数据、函数都可以暴露）

<template>
    <view class="root">
        {{val}}
    </view>
</template>
​
<script setup>
    import { ref } from 'vue';
    const val = ref(0)
    defineExpose({val})
</script>

本质上是将要暴露的数据放在当前组件的DOM节点上

父组件操作子组件数据

通过ref获取到子组件的DOM对象（变量名=子组件ref属性值，才能用ref()函数获取到虚拟DOM节点），

通过 虚拟DOM节点.value.数据名即可拿到暴露的具体数据

<template>
    <view class="root">
        <number ref="num"></number>
        <button @click="numAdd">num.value.val++</button>
    </view>
</template>
​
<script setup>
    import { ref } from 'vue';
    //  定义虚拟DOM对象
    const num = ref()
    function numAdd() {
        //  操作在DOM上暴露的数据
        num.value.val++;
    }
</script>