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

原创

已于 2024-08-14 11:52:03 修改

· 285 阅读

0 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2024-08-13 10:29:24 首次发布

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

1.问题
2.实现

1.问题

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

2.实现

//祖父组件 定时器模拟数据发生改变
  mounted() {
   
    setTimeout(
     () => {
   
        this.demo = {
   
          data:[]
        }
      }, 5000
   )
  },
  data(){
   
    return {
   
      demo: {
   
        data:[{
   
          date: '2016-05-02',
          name: '王小虎',</