Vue3：如何从一个组件调用另一个组件的方法？

当然可行，具体实现方式取决于两个组件的关系，下面分常见场景说明：

场景1：父子组件关系 #

假设componentTwo是componentOne的子组件：

修改componentOne.vue #

<template>
  <section>
    <div @click="callChildMethod">Submit</div>
    <!-- 给子组件添加ref属性 -->
    <componentTwo ref="childComponent"></componentTwo>
  </section>
</template>

<script>
import componentTwo from './componentTwo.vue'

export default {
  components: {
    componentTwo
  },
  methods: {
    callChildMethod() {
      // 通过ref调用子组件的方法
      this.$refs.childComponent.myMethod()
    }
  }
};
</script>

componentTwo.vue 修正语法错误（原代码缺少export default） #

<template>
  <section>
    <div>Lorem ipsum</div>
  </section>
</template>

<script>
export default {
  methods: {
    myMethod() {
      console.log('myMethod被触发了')
      // 你的业务代码
    }
  }
}
</script>

如果componentOne是子组件，componentTwo是父组件：

• 子组件componentOne点击时用$emit触发父组件的事件，父组件再调用目标方法

// componentOne.vue
<template>
  <section>
    <div @click="$emit('trigger-method')">Submit</div>
  </section>
</template>

// 父组件（比如App.vue）
<template>
  <componentOne @trigger-method="callComponentTwoMethod"></componentOne>
  <componentTwo ref="compTwo"></componentTwo>
</template>

<script>
import componentOne from './componentOne.vue'
import componentTwo from './componentTwo.vue'

export default {
  components: { componentOne, componentTwo },
  methods: {
    callComponentTwoMethod() {
      this.$refs.compTwo.myMethod()
    }
  }
}
</script>

场景2：兄弟组件关系（平级组件） #

两个组件都在同一个父组件下，通过父组件作为中间层传递：

1. componentOne点击时$emit事件给父组件
2. 父组件监听该事件，调用componentTwo的方法（通过ref）

代码示例：

// componentOne.vue
<template>
  <section>
    <div @click="$emit('call-sibling-method')">Submit</div>
  </section>
</template>

// 父组件（如App.vue）
<template>
  <componentOne @call-sibling-method="handleCallSibling"></componentOne>
  <componentTwo ref="siblingComp"></componentTwo>
</template>

<script>
import componentOne from './componentOne.vue'
import componentTwo from './componentTwo.vue'

export default {
  components: { componentOne, componentTwo },
  methods: {
    handleCallSibling() {
      this.$refs.siblingComp.myMethod()
    }
  }
}
</script>

// componentTwo.vue（修正语法后）
<template>
  <section>
    <div>Lorem ipsum</div>
  </section>
</template>

<script>
export default {
  methods: {
    myMethod() {
      console.log('兄弟组件触发了myMethod')
      // 业务代码
    }
  }
}
</script>

你之前用$emit没成功的可能原因 #

• 没有在父组件中监听子组件触发的$emit事件，$emit本身只能向父组件传递事件，无法直接触发兄弟组件方法
• 组件关系判断错误，比如误以为是父子但实际是兄弟，导致emit后没有对应处理逻辑

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