vue3中ref获取子组件的值

在Vue 3中，可以使用ref来获取子组件的引用，并通过该引用调用子组件的方法或访问其数据。以下是一个简单的例子：

1. 子组件 (ChildComponent.vue):

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello from Child Component'
    };
  },
  methods: {
    getMessage() {
      return this.message;
    }
  }
};
</script>

2. 父组件 (ParentComponent.vue):

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <button @click="accessChildComponentData">Access Child Component Data</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const childComponentRef = ref(null);
 
    const accessChildComponentData = () => {
      if (childComponentRef.value) {
        console.log(childComponentRef.value.getMessage()); // 访问子组件的方法
        console.log(childComponentRef.value.message); // 访问子组件的数据
      }
    };
 
    return {
      childComponentRef,
      accessChildComponentData
    };
  }
};
</script>

在这个例子中，父组件通过ref="childComponentRef"属性为子组件设置了一个引用名称。在父组件的setup函数中，使用ref函数创建了一个响应式引用childComponentRef。通过childComponentRef.value可以访问子组件的实例，并调用子组件的方法或访问数据。