Vue3父组件访问子组件数据 defineExpose用法

在Vue3中，父组件可通过创建一个ref(null)，然后将赋值的元素写在当前子组件上即可，在需要的时候，通过定义的响应式变量即可获取，获取后即可取得当前子组件内部dom以及当前子组件内部变量方法等，并且直接使用子组件内部方法。但是有时候获取的时候返回的没有什么信息只有一个{_v_skin:true}这个信息，这条信息表示数据无法响应。

父组件示例

<template>
  <div class="container">
      <h-demo ref="childDom" />

      <button @click="getChild"></button>
  </div>
</template>

<script setup>
import Hdemo from '@/components/Hdemo';
import { ref， } from 'vue';
const childDom=ref(null)


onMounted(() => {
  const getChild = () =>{
    console.log(childDom.value)
    // 打印当前子组件暴露出来的数据
    childDom.value.handleVal()
    // 执行子组件方法
  }
})
</script>
<style lang="scss" scoped>

</style>

子组件示例

<script setup>
import { ref } from 'vue';
    const demo=ref('测试用例')
    const  handleVal=()=>{
        demo.value="已改变"
    }
</script>
<template>
  <div class="inner">
      {{demo}}
      <button @click="handleVal">改值</button>
  </div>
</template>
<style lang="scss" scoped>

</style>

此时childDom.value的值为{_v_skin:true}无法获取子组件内部信息

重点

原因：使用 <script setup> 语法糖的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

方法：为了在 <script setup> 语法糖组件中明确要暴露出去的属性，，使用 defineExpose 编译器宏将需要暴露出去的变量与方法放入暴露出去就可以

子组件使用defineExpose 暴露示例

<script setup>
import { ref } from 'vue';
    const demo=ref('测试用例')
    const  handleVal=()=>{
        demo.value="已改变"
    }
//将需要暴露出去的数据与方法都可以暴露出去
    defineExpose({
        demo,
        handleVal,
    })
</script>
<template>
  <div class="inner">
      {{demo}}
      <button @click="handleVal">改值</button>
  </div>
</template>
<style lang="scss" scoped>

</style>

此时父组件即可获取子组件内部变量与方法与当前dom等信息，父组件必须在onMounted钩子函数中才能访问到ref中的值。

附上vue3官方文档说明