vue依赖注入 实现祖父组件data数据改变，子孙组件自动跟着改变

1.问题

项目中，层级传递有点深，所以用了依赖注入。主数据是在祖父组件获取的，子孙组件拿来展示（例如el-table的data数据源）。但是祖父组件的数据改变了的话，默认不是响应式的，祖孙组件的数据是不会改变展示渲染的。

2.实现

//祖父组件 定时器模拟数据发生改变
  mounted() {
    setTimeout(
     () => {
        this.demo = {
          data:[]
        }
      }, 5000
   )
  },
  data(){
    return {
      demo: {
        data:[{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
    },
    provide() {
      return {
         A:() => this.demo
      }
   },

//子孙组件
<template>
    <div>child
        <p>1</p>
        <el-popover placement="right" width="400" trigger="click">
            <el-table :data="B">
                <el-table-column width="150" property="date" label="日期"></el-table-column>
                <el-table-column width="100" property="name" label="姓名"></el-table-column>
                <el-table-column width="300" property="address" label="地址"></el-table-column>
            </el-table>
            <el-button slot="reference">click 激活</el-button>
        </el-popover>
    </div>

</template>

<script>
export default {
    inject: ['A'],
    computed: {
        B() {
            return this.A().data
        }
    },

    mounted() {
        console.log(111, this.A())

    }
}
</script>

主要注意的地方有两个，第一，祖父组件传递的方法最好是一个包含数据的对象；第二，子孙组件computed进行return