Vue.js中子组件调用父组件方法报错：this.$parent.addNew不是函数的解决办法

问题根源 #

你通过this.$parent.addNew()调用父组件方法的写法，强依赖组件的嵌套层级关系：如果子组件的直接父组件并非你预期的目标组件（比如中间嵌套了其他组件），就会触发this.$parent.addNew is not a function错误。而且这种写法耦合性极高，组件结构变动就会失效，不推荐使用。

推荐解决方案：自定义事件（Vue官方推荐） #

这种方式彻底解耦父子组件，不受层级变化影响，是Vue组件通信的标准做法。

子组件修改 #

写法一：直接在点击事件中触发自定义事件

<button @click="$emit('trigger-add')" />

写法二：保留子组件addNew方法，内部触发自定义事件

<button @click="addNew" />

methods: {
  addNew() {
    this.$emit('trigger-add');
  }
}

父组件修改 #

在引用子组件的位置，监听自定义事件并绑定父组件的addNew方法：

<YourChildComponent @trigger-add="addNew" />

父组件原有方法无需改动：

addNew() {
  this.$emit('open');
}

临时应急方案（仅适用于组件层级绝对固定的场景） #

如果一定要使用$parent，先确认子组件的直接父组件是否为目标组件。可以在子组件的addNew方法中打印父组件实例，检查方法列表：

methods: {
  addNew() {
    console.log(this.$parent); // 查看父组件实例是否包含addNew方法
    // 若目标组件是祖父级，可尝试this.$parent.$parent.addNew()，但这种写法极度脆弱，不建议长期使用
  }
}

内容的提问来源于stack exchange，提问作者World's famous people