vue组件使用provide和inject调用祖父组件的方法/函数

开发过程中遇到了需要调用祖父组件方法的需求

• （如果是调用祖父组件的data，要考虑是否开启响应性，如果传入的是对象，则数据为响应式，这里暂不做讨论）
• 使用provide和inject不仅孙可以调祖父的方法，不论组件层次有多深，并在其上下游关系成立的时间里始终生效

在父组件使用provide传递方法

<script>
export default{
   data() {
     return{}
   },
  provide() {
    return {
      fatherMethod: this.dianji  //注意方法名不能跟括号
    }
  },
  methods:{
    dianji() {
      console.log("祖父组件的方法")
    },
  }
}
</script>

子孙组件用inject接收方法

<script>
  export default{
    data() {
      return{}
    },
    inject:["fatherMethod"],
  }
</script>

子孙组件使用方法: 在需要的地方按照本组件的方法使用即可

this.fatherMethod()