vue3 获取子组件的方法

在 Vue 3 中，获取子组件实例是一个常见的需求，尤其是在父组件需要调用子组件的方法或访问其属性时。Vue 3 提供了多种方式来实现这一目标，最常用的方式是通过 ref 和 $refs 来引用子组件实例，或者使用 provide/inject 进行依赖注入。

1. 使用 `ref` 和 `$refs`

这是最直接且常用的方式。通过给子组件添加 ref 属性，可以在父组件中通过 $refs 访问到子组件的实例。

代码示例

vue
<!-- ParentComponent.vue -->

  <div>
    
    <button>Call Child Method</button>
  </div>
</p>


import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childComponent = ref(null);

    const callChildMethod = () => {
      if (childComponent.value) {
        childComponent.value.childMethod();
      }
    };

    return {
      childComponent,
      callChildMethod,
    };
  },
};


<p>

vue
<!-- ChildComponent.vue -->

  <div>
    I am a child component
  </div>
</p>


export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    },
  },
};


<p>

在这个例子中，父组件通过 ref="childComponent" 绑定了对子组件的引用，并在点击按钮时调用了子组件的 childMethod 方法。

2. 使用 `provide` 和 `inject`

如果你不想通过 ref 直接引用子组件，或者你有一个复杂的嵌套组件结构，可以考虑使用 provide 和 inject。这种方式允许父组件向其所有子孙组件提供数据或方法，而不需要层层传递 props。

代码示例

vue
<!-- ParentComponent.vue -->

  <div>
    
    <button>Call Child Method</button>
  </div>
</p>


import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childMethod = ref(() => {});

    provide('callChildMethod', (method) => {
      childMethod.value = method;
    });

    const callChildMethod = () => {
      childMethod.value();
    };

    return {
      callChildMethod,
    };
  },
};


<p>

vue
<!-- ChildComponent.vue -->

  <div>
    I am a child component
  </div>
</p>


import { inject, onMounted } from 'vue';

export default {
  setup() {
    const callChildMethod = inject('callChildMethod');

    onMounted(() => {
      callChildMethod(() => {
        console.log('Child method called');
      });
    });

    return {};
  },
};


<p>

在这个例子中，父组件通过 provide 提供了一个方法注册接口，子组件在挂载时将自身的方法注册到父组件提供的接口中，父组件可以通过调用 callChildMethod 触发子组件的方法。

3. 使用事件总线（Event Bus）

虽然 Vue 3 推荐使用 Composition API 和 provide/inject 来处理跨组件通信，但在某些情况下，特别是当父子组件之间没有直接关系时，可以使用事件总线来实现通信。不过需要注意的是，事件总线可能会导致代码耦合度增加，维护成本上升，因此建议谨慎使用。

代码示例

javascript
// eventBus.js
import { createApp } from 'vue';</p>

<p>const eventBus = createApp({});</p>

<p>export default eventBus;

vue
<!-- ParentComponent.vue -->

  <div>
    
    <button>Call Child Method</button>
  </div>
</p>


import eventBus from './eventBus';

export default {
  mounted() {
    this.callChildMethod = this.callChildMethod.bind(this);
  },
  methods: {
    callChildMethod() {
      eventBus.config.globalProperties.$emit('call-child-method');
    },
  },
};


<p>

vue
<!-- ChildComponent.vue -->

  <div>
    I am a child component
  </div>
</p>


import eventBus from './eventBus';

export default {
  mounted() {
    eventBus.config.globalProperties.$on('call-child-method', this.childMethod);
  },
  methods: {
    childMethod() {
      console.log('Child method called');
    },
  },
};


<p>

在 Vue 3 中获取子组件的方法有多种选择，具体使用哪种方式取决于你的应用场景和项目结构。推荐优先使用 ref 和 provide/inject，它们更加符合 Vue 的设计理念，同时也更容易维护。

// 来源：https://www.nzw6.com