從孫子組件內部調用祖父方法

Question

我有 3 個嵌套組件

<GrandParent />
   <Parent />
       <Child />

我的Child組件中有一個按鈕，雙擊時我想在GrandParent組件中調用 function

 <button @dblclick="this.$parent.callGrandParentFunction(model)"> call grandparent </button>

使用this.$parent我只能訪問Parent方法...有沒有辦法將 go 提高一級並調用GrandParent方法？

SO上有一個類似的問題，但它是關於vue2

VueJS 孫子組件在曾祖父組件中調用 function

Answer 1

嘗試使用提供/注入模式：

祖父母：

export default {
  methods: {
      someMethod(){
       //
      }
  },
  provide() {
    // use function syntax so that we can access `this`
    return {
      someMethod: this.someMethod
    }
  }
}

在 GrandChild 組件中：

export default {
  inject: ['someMethod'],
  created() {
    //run the method 
    this.someMethod()
  }
}