provide 和 inject高阶使用

provide 在祖先里授权导出 inject在后代负责接收

foo可以是本组件的函数方法 或者 变量
foo 也可以是祖先组件自己 祖先组件foo: this 后代组件 foo.$options.data().msg

祖先组件

<script>
export default {
  name: 'App',
  provide () {
    return {
      foo: this.zmsg
    }
  },
  data () {
    return {
      zmsg: '父元素'
    }
  }
}
</script>

后代组件

<template>
 <section>
    我是hello1
    {{foo.$options.data().zmsg}}
  </section>
</template>

<script>
  export default {
    name: "hello1",
    inject: ['foo'],
  }
</script>