VueJS 2事件：如何实现父组件触发子组件中的方法

Got it, so you need to trigger a method in a child component from its parent to run some pre-operations? Let's break down how to do this in Vue.js—since we’re usually used to the reverse flow (child notifying parent via events), this is a common but equally useful pattern.

Method 1: Use ref (Recommended for Direct Parent-Child Scenarios) #

This is the simplest and most straightforward approach for direct parent-child communication when you need to explicitly call a child method.

Step 1: Assign a ref to the Child Component #

In your parent component’s template, add a ref attribute to the child component so you can reference it later:

<template>
  <div>
    <button @click="startChildPreOp">Run Child Pre-Operation</button>
    <!-- Add ref to target the child component -->
    <my-component ref="targetChild"></my-component>
  </div>
</template>

Step 2: Call the Child Method from the Parent #

In the parent’s methods, use this.$refs to access the child component instance and invoke its method directly:

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: { MyComponent },
  methods: {
    startChildPreOp() {
      // Access the child via ref and call its method
      this.$refs.targetChild.executePreOperation();
    }
  }
};
</script>

Step 3: Define the Target Method in the Child Component #

Make sure the child component has the method you want to trigger, with your pre-operation logic inside:

<!-- MyComponent.vue -->
<script>
export default {
  methods: {
    executePreOperation() {
      // Your pre-operation code here
      console.log("Child component's pre-operation is running!");
      // Optional: Emit an event back to parent once done
      this.$emit('pre-op-finished', { status: 'completed' });
    }
  }
};
</script>

Method 2: State Management (For Complex/Non-Direct Component Relationships) #

If your app is large, or the parent and child aren’t directly nested, use a state management tool like Pinia or Vuex:

1. Create a boolean flag in your store (e.g., triggerPreOp)
2. The parent dispatches an action to set this flag to true
3. The child component watches this flag—when it changes to true, it runs the pre-operation method and resets the flag

Quick Contrast with Child-to-Parent Flow #

Just to tie back to the child-to-parent communication you mentioned:

• Child → Parent: Child uses this.$emit('event-name', data) to send updates, parent listens with v-on:event-name (or @event-name)
• Parent → Child: Use ref for direct calls, or state management for scalable cross-component cases

内容的提问来源于stack exchange，提问作者user1161137