VueJS：子组件方法传递给父组件无法执行，求标准实现方案

嘿，我来帮你搞定这个问题～你当前的做法之所以不生效，是因为父组件只是接收了子组件通过changeAgeFn事件传递过来的changeAge方法，但并没有把它赋值给父组件自身的方法，而且你的父组件里根本没定义changeAge()方法，按钮点击自然没反应。下面给你几种Vue官方推荐的实现方式：

方式一：使用ref直接调用子组件方法（最常用） #

这是父子组件间调用方法最直接的方式，通过给子组件添加ref属性，父组件可以直接获取子组件实例，进而调用其内部方法。

修改后的Parent.vue #

<template>
  <div class="parent-wrap">
    <p>UserName: {{user}}, age: {{age}} <button @click="triggerChildChangeAge"> Change Age</button></p>
    <!-- 给子组件添加ref属性 -->
    <child ref="childComponent" :user="user" :age="age" @userChanged="user = $event"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  data: function() {
    return {
      user: 'John',
      age: 35
    }
  },
  components: {
    child
  },
  methods: {
    triggerChildChangeAge() {
      // 通过ref获取子组件实例，直接调用其changeAge方法
      this.$refs.childComponent.changeAge()
      // 同步更新父组件的age，避免子组件直接修改props违反Vue规范
      this.age = 20
    }
  }
}
</script>
<style>
.child-wrap {
  border: 3px solid #000;
  max-width: 300px;
  padding: 20px;
  background: lightblue;
}
.parent-wrap {
  padding: 30px;
  background-color: lightcoral;
  border: 3px solid #000;
}
</style>

注意点 #

• 要确保子组件已经挂载完成后再调用方法，比如在mounted钩子内调用，或者用this.$nextTick()包裹，避免找不到实例。
• 子组件里直接修改props（比如this.age = '20'）违反Vue单向数据流规范，正确做法是父组件调用方法后自己更新age，或者子组件通过$emit通知父组件修改。

方式二：通过props触发（更符合单向数据流理念） #

如果你想严格遵循Vue的单向数据流原则，可以通过给子组件传递一个控制型props，子组件监听这个props的变化，当满足条件时执行目标方法。

修改后的Parent.vue #

<template>
  <div class="parent-wrap">
    <p>UserName: {{user}}, age: {{age}} <button @click="triggerChangeAge = true"> Change Age</button></p>
    <child :user="user" :age="age" @userChanged="user = $event" :trigger-change-age="triggerChangeAge" @age-changed="age = $event"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  data: function() {
    return {
      user: 'John',
      age: 35,
      triggerChangeAge: false
    }
  },
  components: {
    child
  }
}
</script>
<style>
.child-wrap {
  border: 3px solid #000;
  max-width: 300px;
  padding: 20px;
  background: lightblue;
}
.parent-wrap {
  padding: 30px;
  background-color: lightcoral;
  border: 3px solid #000;
}
</style>

修改后的child.vue #

<template>
  <div class="child-wrap">
    <p>UserName: {{user}}, age: {{age}} <button @click="changeName"> Change Name</button></p>
  </div>
</template>
<script>
export default {
  props: ['user', 'age', 'triggerChangeAge'],
  watch: {
    // 监听triggerChangeAge的变化
    triggerChangeAge(newVal) {
      if (newVal) {
        this.changeAge()
        // 触发事件通知父组件更新age
        this.$emit('age-changed', 20)
        // 重置triggerChangeAge，避免重复触发
        this.$emit('update:triggerChangeAge', false)
      }
    }
  },
  methods: {
    changeName() {
      this.$emit('userChanged', 'Rahul')
    },
    changeAge() {
      // 不再直接修改props，遵循单向数据流
    }
  }
}
</script>

这种方式完全遵循单向数据流，父组件通过props控制子组件行为，子组件通过事件反馈结果，逻辑更清晰。

方式三：Event Bus（事件总线） #

如果是跨多层组件的场景可以用，但父子组件不推荐（ref和props更直接）。简单实现如下：

1. 创建一个事件总线实例：

// bus.js
import Vue from 'vue'
export const bus = new Vue()

2. 子组件监听事件：

// child.vue
import { bus } from './bus.js'
export default {
  mounted() {
    bus.$on('changeChildAge', () => {
      this.changeAge()
      this.$emit('age-changed', 20)
    })
  },
  // ...其他代码
}

3. 父组件触发事件：

// Parent.vue
import { bus } from './bus.js'
export default {
  methods: {
    triggerChildChangeAge() {
      bus.$emit('changeChildAge')
      this.age = 20
    }
  }
  // ...其他代码
}

总结 #

• 父子组件间优先使用ref方式，简单直接，代码量少。
• 如果想严格遵循单向数据流，选择props+watch的方式。
• Event Bus适合跨层级或非父子组件的场景，父子组件用它有点大材小用。

另外，还要纠正你当前代码里的一个问题：子组件直接修改props（this.age = '20'）是不允许的，Vue会给出警告，正确的做法是通过$emit通知父组件修改对应的变量，保持数据流向的一致性。

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