Vue2里父组件怎么调用子组件的方法？

terry 10小时前阅读数 9 #Vue

在Vue2开发中，经常会碰到父组件需要触发子组件方法的场景，比如父组件里的按钮要调用子组件的表单验证逻辑，或者父组件想控制子组件里的动画执行，那到底怎么让父组件“指挥”子组件的方法执行呢？这篇文章就拆透几种实用思路,帮你解决父调子方法的难题。

用ref属性直接调：最直观的“直连”方式

Vue里的ref属性，能给元素或组件注册一个引用标识，父组件给子组件加上ref后，就能通过this.$refs拿到子组件的实例，进而调用子组件里的方法，这就像给父组件和子组件牵了条“直接通话”的线，简单又直观。

步骤拆解

给子组件加ref：在父组件的模板里，给子组件标签添加ref属性，<ChildComponent ref="myChild" />，这样父组件就能通过 this.$refs.myChild 找到这个子组件。
子组件定义方法：在子组件的methods里写好要被调用的方法，比如处理表单提交的handleSubmit()。
父组件调用：在父组件的方法里，通过 this.$refs.myChild.方法名() 触发子组件方法。

代码示例

父组件（Parent.vue）：

<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <ChildComponent ref="childRef" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod() // 调用子组件的childMethod
    }
  }
}
</script>

子组件（ChildComponent.vue）：

<template><!-- 子组件模板 --></template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用啦')
    }
  }
}
</script>

注意这些坑

渲染时机：ref要等子组件渲染完成后才会生成，所以别在父组件的created钩子调用（此时子组件还没mounted），可以放到mounted或点击事件里。
动态渲染（v-if）：如果子组件被v-if控制，当v-if="false"时ref会消失，调用前要判断this.$refs.myChild是否存在，if (this.$refs.myChild) { ... }。

事件总线（EventBus）：灵活的“消息中转站”

如果父组件和子组件不是直接嵌套（比如隔了好几层，或者是兄弟组件），用ref就不太方便了，这时候可以搞个“事件总线”——本质是一个空的Vue实例，当作消息中转站，父组件和子组件通过这个中转站发消息、收消息，实现方法调用。

步骤拆解

创建EventBus：新建一个js文件（比如EventBus.js），导出一个空的Vue实例：import Vue from 'vue'; export default new Vue();。
子组件监听事件：在子组件的created或mounted钩子中，用 EventBus.$on('事件名', 要执行的方法) 监听父组件的“召唤”。
父组件触发事件：父组件需要调用时，用 EventBus.$emit('事件名') 给子组件发消息。
销毁事件（重要）：子组件销毁前，用 EventBus.$off('事件名', 方法) 移除监听，避免重复执行或内存泄漏。

代码示例

EventBus.js：

import Vue from 'vue'
export default new Vue()

子组件（ChildComponent.vue）：

<template><!-- 子组件模板 --></template>
<script>
import EventBus from './EventBus.js'
export default {
  created() {
    EventBus.$on('callChildFn', this.childMethod) // 监听事件，触发时执行childMethod
  },
  beforeDestroy() {
    EventBus.$off('callChildFn', this.childMethod) // 销毁前移除监听
  },
  methods: {
    childMethod() {
      console.log('通过EventBus触发了子组件方法')
    }
  }
}
</script>

父组件（Parent.vue）：

<template>
  <button @click="triggerByBus">用EventBus调用子组件方法</button>
</template>
<script>
import EventBus from './EventBus.js'
export default {
  methods: {
    triggerByBus() {
      EventBus.$emit('callChildFn') // 触发事件，子组件会收到
    }
  }
}
</script>

注意这些坑

事件名统一：父组件和子组件的事件名要一模一样，拼错一个字母都收不到消息。
及时销毁：子组件销毁时一定要移除事件监听，否则多次创建子组件后，同一个事件会被触发多次（比如弹窗组件，关了再开可能重复执行方法）。
项目复杂度：如果项目很大，事件总线里的事件会越来越多，维护起来麻烦，这时候可以考虑用Vuex或Pinia来管理状态和方法调用。

自定义事件+回调：把方法“递”给父组件

这种思路有点像“回调函数”：子组件把自己的方法当作参数，通过自定义事件传给父组件；父组件把这个方法存起来，需要的时候再调用，适合父组件需要“延迟调用”或者“有条件调用”子组件方法的场景。

步骤拆解

子组件传方法：子组件在合适的生命周期（比如mounted），通过 this.$emit('事件名', 自己的方法)，把方法传给父组件。
父组件存方法：父组件在子组件标签上监听这个自定义事件，把方法存到data里，@passMethod="saveMethod"，然后在saveMethod里把方法存起来。
父组件调用：父组件需要调用时，执行存起来的方法。

代码示例

子组件（ChildComponent.vue）：

<template><!-- 子组件模板 --></template>
<script>
export default {
  mounted() {
    this.$emit('passMethod', this.childMethod) // 把自己的childMethod传给父组件
  },
  methods: {
    childMethod() {
      console.log('子组件方法被父组件通过回调调用')
    }
  }
}
</script>

父组件（Parent.vue）：

<template>
  <div>
    <button @click="callStoredMethod">调用存储的子组件方法</button>
    <ChildComponent @passMethod="saveChildMethod" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      childFn: null // 存储子组件传过来的方法
    }
  },
  methods: {
    saveChildMethod(fn) {
      this.childFn = fn // 把传过来的方法存到childFn里
    },
    callStoredMethod() {
      if (this.childFn) { // 先判断方法是否存在，避免报错
        this.childFn()
      }
    }
  }
}
</script>

注意这些坑

传方法时机：子组件要在方法已经定义好的生命周期传，比如mounted（created里方法可能还没绑定this）。
空值处理：父组件调用前一定要判断方法是否存在（比如子组件还没渲染完，childFn还是null），否则会报“xxx is not a function”的错。

provide/inject：深层嵌套下的“穿透”调用

如果父组件和子组件中间隔了很多层（比如父->A->B->子），用ref得层层传递，特别麻烦，这时候可以用provide/inject，让父组件把“调用逻辑”“穿透”传递给深层的子组件，子组件再把自己的方法暴露给父组件，实现调用。

步骤拆解

父组件provide：父组件用provide提供两个东西：一个是“接收子组件方法”的函数，另一个是“调用子组件方法”的函数。
子组件inject：子组件用inject接收父组件提供的“接收方法”的函数，然后在合适的时机（比如mounted）把自己的方法传过去。
父组件调用：父组件执行provide里的“调用函数”，触发子组件方法。

代码示例（模拟深层嵌套）

父组件（Grandparent.vue，最外层）：

<template>
  <div>
    <button @click="callGrandchildMethod">调用孙子组件方法</button>
    <ParentMiddle /> <!-- 中间层组件 -->
  </div>
</template>
<script>
import ParentMiddle from './ParentMiddle.vue'
export default {
  components: { ParentMiddle },
  data() {
    return {
      grandchildMethod: null // 存储孙子组件的方法
    }
  },
  provide() {
    return {
      setGrandchildMethod: (fn) => { // 提供一个方法，让孙子组件把自己的方法传上来
        this.grandchildMethod = fn
      },
      callGrandchild: () => { // 提供调用方法
        if (this.grandchildMethod) {
          this.grandchildMethod()
        }
      }
    }
  },
  methods: {
    callGrandchildMethod() {
      this.callGrandchild() // 调用provide里的callGrandchild
    }
  }
}
</script>

中间层组件（ParentMiddle.vue，只负责传递，无逻辑）：

<template>
  <GrandchildComponent /> <!-- 孙子组件 -->
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue'
export default {
  components: { GrandchildComponent }
}
</script>

孙子组件（GrandchildComponent.vue，最内层）：

<template><!-- 孙子组件模板 --></template>
<script>
export default {
  inject: ['setGrandchildMethod'], // 注入父组件提供的set方法
  mounted() {
    this.setGrandchildMethod(this.childMethod) // 把自己的childMethod传上去
  },
  methods: {
    childMethod() {
      console.log('深层嵌套的子组件方法被调用啦')
    }
  }
}
</script>

注意这些坑

作用域问题：provide，所有后代组件都能inject，所以命名要独特，别和其他组件的provide冲突。
深层场景才用：如果只是普通父子关系，用ref更简单，provide/inject适合层级特别深的情况。
方法加载时机：要确保孙子组件已经执行了setGrandchildMethod，父组件再调用，否则会找不到方法。

实战场景对比：选哪种方法更合适？

不同场景下，方法的选择也不一样，看几个例子就懂了：

场景1：直接父子，简单调用

比如父组件里的按钮要触发子组件的表单提交，这种情况用ref最方便，直接拿实例调用，逻辑清晰，传参也容易。

场景2：跨层级（祖孙、兄弟）

比如顶部导航要调用侧边栏的折叠方法，中间隔了布局组件，这时候用EventBus或provide/inject，EventBus更灵活（不需要管层级），但要注意销毁；provide/inject适合层级深且结构稳定的项目。

场景3：父组件需要延迟调用

比如父组件要等子组件加载完异步数据后，再调用子组件的渲染方法，这时候用自定义事件+回调，把子组件的方法“拿”到父组件，等数据加载完再调用。

常见问题与避坑指南

实际开发中，父调子方法容易碰到这些问题，提前避坑能少掉头发：

ref调用时报错“xxx is undefined”

原因一般是子组件没渲染完或被v-if干掉了，解决方法：

如果用了v-if，换成v-show（v-show是隐藏，dom还在；v-if是销毁，dom没了）。
调用ref的时机往后放，比如放到mounted钩子，或者点击事件里（用户操作时子组件肯定渲染完了）。
调用前判断ref是否存在：if (this.$refs.myChild) { this.$refs.myChild.方法() }。

EventBus多次触发方法

原因是组件销毁时没移除事件监听，导致重复绑定，解决方法：在子组件的beforeDestroy钩子中，用EventBus.$off('事件名', 方法)移除监听。

provide/inject传方法后调用没反应

检查这两点：

子组件是否用inject正确接收了父组件的provide内容。
子组件是否在合适的生命周期（比如mounted）把方法传给父组件。

子组件方法里的this指向不对

如果子组件方法作为参数传递（比如自定义事件传方法），this可能指向不对，解决方法：

在子组件里把方法写成箭头函数，比如childMethod: () => { ... }（但箭头函数里的this是父级作用域，要注意）。
父组件调用时绑定this，比如this.childFn.call(this)。

掌握这几种方法和避坑技巧，不管是简单父子组件，还是复杂的跨层级场景，父组件调用子组件方法都能轻松搞定～要是你还有其他场景的疑问,评论区随时聊～

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue2里的filters到底怎么用？一篇文章讲透常见问题

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

Vue2里父组件怎么调用子组件的方法？

用ref属性直接调：最直观的“直连”方式

步骤拆解

代码示例

注意这些坑

事件总线（EventBus）：灵活的“消息中转站”

步骤拆解

代码示例

注意这些坑

自定义事件+回调：把方法“递”给父组件

步骤拆解

代码示例

注意这些坑

provide/inject：深层嵌套下的“穿透”调用

步骤拆解

代码示例（模拟深层嵌套）

注意这些坑

实战场景对比：选哪种方法更合适？

场景1：直接父子，简单调用

场景2：跨层级（祖孙、兄弟）

场景3：父组件需要延迟调用

常见问题与避坑指南

ref调用时报错“xxx is undefined”

EventBus多次触发方法

provide/inject传方法后调用没反应

子组件方法里的this指向不对

版权声明

作者文章