vue 父组件向子组件异步传值不更新问题

最新推荐文章于 2024-08-22 14:26:51 发布

加入掉发梯队

最新推荐文章于 2024-08-22 14:26:51 发布

阅读量2.2k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45009047/article/details/108579040

版权

在Vue中，当父组件的数据需要通过异步请求获取时，父组件向子组件传递的初始值可能不会更新。解决这个问题可以采用两种方法：1) 在父组件中对子组件使用v-if，确保数据加载后再渲染子组件；2) 调整生命周期顺序，等待父组件数据获取完成后再执行子组件的相关功能。这两种方法分别提供了单次调用和多次调用场景的解决方案。

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

vue 父组件向子组件异步传值不更新问题

仅验证了父组件向子组件单向传值的有效性

问题描述

父组件待传递数据需通过ajax连接后台获取，所以当按照普通的父、子组件的数据传递方式，会产生父组件在获取到后台数据前就已经将初始化数据值传递给子组件，以至于子组件无法接收到“真实”数据。

主要参考了两种方法进行修正：

1.添加v-if判断

在父组件中添加v-if判断,但是此方式只适用于子组件单次调用

代码如下（示例）：

// 父组件
<template>
  <bar-chart :items = "items1" v-if="flag"></bar-chart>
</template>
<script>
 import BarChart from '@/view/components/bar-chart'
 export default