vue3父组件使用ref获取子组件的属性和方法

在Vue 3中，父组件可以使用ref来获取子组件的实例，并访问其公开的属性和方法。以下是一个简单的例子：

首先，子组件需要正常定义，并且需要使用ref属性来标识自己的属性和方法：

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello from child component',
    };
  },
  methods: {
    greet() {
      alert(this.message);
    },
  },
};
</script>

然后，父组件可以通过ref来获取子组件的引用，并调用其方法或访问其数据：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childComp" />
    <button @click="accessChildComponent">Access Child Component</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent,
  },
  methods: {
    accessChildComponent() {
      const childComp = this.$refs.childComp;
      alert(childComp.message); // 访问属性
      childComp.greet(); // 调用方法
    },
  },
};
</script>

在父组件的模板中，我们通过<ChildComponent ref="childComp" />为子组件指定了一个ref。然后在父组件的方法中，我们通过this.$refs.childComp获取子组件的实例，并调用其greet方法或访问其message属性。