Vue高级组件传值之 provide/inject

vue组件父传子传值的话有很多地方都可以查到，有很多方法：
props传值、vuex传值等
现在说的是另外一种用的比较少的 provide/inject
现在有一个需求，要求是在在孙组件中要访问到父组件的值，即：

于是就用到了provide和inject，废话不多说，还是直接上代码吧：

父组件
<script>
  export default {
    name: "parent",
    provide() {
      return {
        parent:'Hellow World',
        hello:this.hello
      }
    },
    methods:{
      hello(){
        console.log("Hello World")
      },
    }
  };
</script>

子组件
<template>
  <div>{{parent}}</div>
</template>

<script>
  export default {
    name: "great-grandson",
    inject:["parent","hello"],
    mounted() {
      this.hello();
    }
  };
</script>

定义变量或者方法的时候只需要在provide中定义，跟定义data一样，不需要单独的去传递，只是定义就可以了。
而在子组件中的用法和props相同，定义之后使用就可以在数据中使用