provide 和 inject高阶使用

 // 祖先组件
<script>
export default {
    name: 'App',
    // 通过provide方法，祖先组件向其所有后代组件提供了数据或方法
    provide () {
        return {
            // 这里我们提供了foo，它的值是zmsg的值
            foo: this.zmsg
        }
    },
    data () {
        return {
            // zmsg是祖先组件的一个数据项
            zmsg: '父元素'
        }
    }
}
</script>

// 后代组件
<template>
 <section>
    我是hello1
     <!-- 使用inject注入的foo来获取其值，这里我们获取的是foo.$options.data().zmsg -->
    {{foo.$options.data().zmsg}}
  </section>
</template>

<script>
  export default {
      name: "hello1",
      // 通过inject，后代组件可以从祖先组件中注入数据或方法
      // 这里我们注入了foo
      inject: ['foo'],
  }
</script>