vue2中provide inject异步数据传递处理

最新推荐文章于 2024-05-14 16:40:10 发布

西门飘雪01

最新推荐文章于 2024-05-14 16:40:10 发布

阅读量472

点赞数 3

分类专栏： vue2 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/u011717295/article/details/137871665

版权

vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文讨论了Vue中如何通过provide和inject实现多级组件间的数据传递，强调了这种方法在初始化时的便捷性，但对实时更新的支持不足。作者提出了通过定时器模拟数据变化来解决这一问题。

摘要由CSDN通过智能技术生成

当vue文件中存在多级的父子组件传值（即：祖先向下传递数据）、多个子组件或孙子级组件都要使用顶级或父级的数据时，使用provide 和 inject 组合无疑是很方便的一种做法了，但如此只是注入的初始值，并不能随时拿到数据源的实时更新。

祖先组件：

在provide时，返回一个方法，方法中 return 目标数据

<template>
  <div></div>
</template>
<script>
  export default {
     name:'grandFather',
     data(){
       return {
         compName:'默认公司名'
       }
     },
     provide(){
        return {
          getCompName:()=> this.compName
        }
     },
     mounted(){
       setTimeout(()=>{
          this.compName = '修改后的公司名称'
        },1000)
     }

  }
</script>

孙子组件：在inject后，使用计算属性computed计算出一个新值

<template>
    <div class="grand-son-component">
     <h1>{{compSonName}}</h1>
    </div>

</template>
<script>
 export default {
  name:'grandSon',
  inject:['getCompName'],
  computed:{
     compSonName(){
       return this.getCompName()
     }
  }

}

</script>