vue中子孙组件能否调用父组件的方法

Question

father-son-grandson三个组件，我想在grandson组件中调用father组件的方法，如何去实现？
我在father组件中定义了方法，并在father组件中引用son组件监听了该方法

father组件:
deleteTodos: function (index, isCheckedMore) {
    console.log('sdss')
}

<todo-main :todos="todos" @deleteTodos="deleteTodos"></todo-main>

在子组件中引用了grandson组件，没有监听该事件，
在grandson组件中，调用father方法，没有用:

grandson组件：
<button @click="deleteOne">删除</button>

methods: {
    deleteOne: function () {
      this.$emit('deleteTodos', this.index, false)
    }
}

不知道vue中子孙组件能不能调用父组件的方法，怎么用？Thx

Answer 1

要一层一层往上传，我是这样做的，但如果不是方法只是改变状态和值还是用VUEX吧

Answer 2

使用 Event Bus。

官网中的这个例子，应该就是你这个例子的完美解决方案。

Todos
|-- NewTodoInput
|-- Todo
    |-- DeleteTodoButton

Answer 3

一定要这样做的话，可以这样写:

this.$parent.$parent.method();

但是从组件设计角度考虑，组件内部这样调用是有问题的。如果他的爷爷组件并没有mehtod方法，那不是报错了？而且，实现组件的时候，也不能要求调用方的爷爷节点必须有method方法。

所以Vue里面是这样设计通信的：组件中通过emit往上冒泡一个事件，父节点或者爷爷节点通过监听该事件来处理方法。类似于原生的onClick方法。

Answer 4

不知道能不能，看着这个

Answer 5

这个是非父子组件之间的通信，用$emit和$on实现，写法可用参考这个问题的回答关于vue中$emit事件问题

Answer 6

直接用 vuex，便于扩展，日后升级也方便

Answer 7

可以，但不推荐

Answer 8

this.$parent.$parent.method()

不过不建议这样做，组件一旦有交叉调用，组件化编程本身的意义就下降了。

Answer 9

props 可以传递Function的
我自己的使用场景是：有一个子组件定义了几种弹窗（展示一张图片、要求输入表单等），但是弹窗的关闭和其他事件（如提交表单）可以是父组件传递过来的，实现了在子组件中调用了父组件的方法。

Answer 10

如果非要这样写，可能是组件规划产生了问题。

如果 grandson 组件和 son 组件没有很强的关系，只是 dom 结构有父子关系的话，可以在 father 组件中 直接写 son 组件，并在 son 组件中定义 slot，slot 传入 grandson 组件

这样一来 grandson 和 son 相对 father 来说就是平级的了~

Answer 11

element-ui 组件库的事件混合插件 还是很好用的 你可以参考一下

Answer 12

可以使用provide、inject搭配使用。
父组件：

provide () {
  return {
    getProjectDetail: this.getProjectDetail
  }
},
methods: {
   getProjectDetail(){}
}

子组件或更下一级的子孙组件：

inject: ['getProjectDetail'],
mounted() {
    // 使用
    this.getProjectDetail()
}