vue组件通信，祖父级组件向孙子级组件传值，使用provide、inject

<!--
  文件描述：祖先级组件
  创建时间：2019/12/28 15:30
-->
<template>
  <div class="" style="width: 900px;height: 600px;background-color: #d6e7ff;padding: 20px;">
    <span style="font-size: 20px;font-weight: bold;">祖先级组件：father</span>
    <br>
    传给孙子级组件G的参数【toGdata】：{{toGdata}}<br>
    <input type="text" v-model="toGdata.name">
    <div>
      <childrenA></childrenA>
      <childrenB></childrenB>
      <childrenC></childrenC>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from ‘《组件路径》‘;
import childrenA from ‘./childrenA‘
import childrenB from ‘./childrenB‘
import childrenC from ‘./childrenC‘

export default {
  name: ‘father‘,
  provide () {
    return {
      toGdata: this.toGdata
    }
  },
  // import引入的组件需要注入到对象中才能使用
  components: {
    childrenA,
    childrenB,
    childrenC
  },
  data () {
    // 这里存放数据
    return {
      toGdata: { name: ‘李四‘ }
    }
  }
}
</script>

<template>
  <div class="" style="float: left;margin: 10px;width: 250px;height: 500px;background-color: #eeff85;padding: 20px;">
    <span style="font-size: 18px;font-weight: bold;">儿子级组件C：childrenC</span>
    <div>
      <childrenF></childrenF>
      <childrenG></childrenG>
    </div>
  </div>
</template>

<!--文件描述：孙子级组件G
  创建时间：2019/12/28 15:37-->
<template>
  <div class="" style="float: left;margin: 10px;width: 200px;height: 200px;background-color: #ff00de;padding: 20px;color:#fff;">
    <span style="font-size: 14px;font-weight: bold;color:#fff;">孙子级组件G：childrenG</span>
    <div style="color:#0009ff;">
      接受来自祖父级组件parent的数据【toGdata】：{{toGdata}}
      <input type="text" v-model="fromParentData.name">
    </div>

  </div>
</template>

<script>
export default {
  name: ‘childrenA‘,
  inject: [‘toGdata‘],
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      fromParentData: this.toGdata
    }
  }
}
</script>