vue3父组件获取子组件所有属性

最新推荐文章于 2025-02-27 09:07:07 发布

原创

最新推荐文章于 2025-02-27 09:07:07 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

在Vue 3中，如果想要在父组件中获取子组件的所有公开属性和方法，可以不使用 defineExpose，直接通过 ref 来引用子组件，然后通过这个 ref 访问子组件的实例。

以下是一个简单的例子：

子组件 (ChildComponent.vue):

<template>
  <div>
    <button @click="childMethod">Click me</button>
  </div>
</template>
 
<script>
export default {
  setup() {
    const childMethod = () => {
      console.log('Child method called');
    };
 
    // 公开的属性或方法
    return {
      childMethod
    };
  }
};
</script>

父组件:

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <button @click="parentMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const childComponentRef = ref(null);
 
    cons