vue跨层访问数据

<template>
  <div class="grf">
    this is grandpa
    <FatherComponent></FatherComponent>
  </div>
</template>

<script>
import FatherComponent from './FatherComponent.vue';
export default {
    components:{
        FatherComponent
    },
    data(){
        return {
            username:'zhangsan',//普通类型，不会时时响应
            userInfo:{id:1,do:'play'}//这个会实时响应
        }
    },
    provide(){
        return {
            username:this.username,
            userInfo:this.userInfo
        }
    }
}
</script>

<style>
.grf{
    background-color: #0ea1e0;
    height: 100px;
}
</style>

<template>
  <div class="fa">this is father
    <SonComponent></SonComponent>
  </div>
</template>

<script>
import SonComponent from './SonComponent.vue';
export default {
  components:{
    SonComponent
  }
}
</script>

<style>
.fa{
    background: antiquewhite;
    height: 60px;
}
</style>

<template>
  <div class="s">this is son<br>
    <span>{{ username }}</span>&nbsp;&nbsp;
    <span>{{ userInfo.id+'          '+userInfo.do}}</span>
  </div>
</template>

<script>
export default {
  inject:['username','userInfo']
}
</script>

<style>
.s{
  height: 20px;
}
</style>