首页 > 其他分享 >VUE 如何将父组件中的数据传递到子组件中

VUE 如何将父组件中的数据传递到子组件中

时间:2022-09-06 07:33:20浏览次数:92  
标签:到子 VUE 将父 传递 组件 数据 页面

在我们的项目中我们使用 axios 进行异步调用。

因为异步调用的问题,如果我不采取手段,子页面没有办法获得父页面中的数据,页面将会显示为 没有数据。

 

2022-09-05_19-08-49

 

问题和解决

这个问题的原因就是子组件在初始化的时候,父组件还没有获得数据。

可以使用的方法是 v-if 进行判断。

对比上面我们使用了 v-if 判断的代码和没有使用判断的代码。

上面的代码能够让子组件正确加载数据。

 

2022-09-05_19-09-53

 

另外一个需要注意的是,在子组件中需要使用 props:['projects','currentPage'], 将数据从父总结中传递过来。

从父组件中将数据传递过来。

 

2022-09-05_19-13-13   https://www.ossez.com/t/vue/14083

标签:到子,VUE,将父,传递,组件,数据,页面
From: https://www.cnblogs.com/huyuchengus/p/16660342.html

相关文章

  • vue2进阶vue3环境搭建
    一、cli升级sudocnpminstall-g@vue/cli二、查看版本vue--version 目前最新为 @vue/cli5.0.8 vue/cli要4.0以上的版本才有创建vue3的模版 三、升级node......
  • 查看vue版本的方法
    在项目下npmlistvue 或者直接查看package.json文件......
  • Vue-面试题之生命周期函数
    1.什么是生命周期函数?vue组件对象在创建到销毁的过程中,在某一种条件成立的时刻系统会去调用的vue中设定的函数这些函数都叫做:生命周期函数2.vue的命周期函数......
  • vue3项目-小兔鲜儿笔记-商品详情页02
    1.SKU和SPU概念SPU代表一个商品,这个商品可以拥有很多属性SKU代表这个商品可选规格的任意组合,是库存单位唯一标识 2.路径字典大致步骤根据后台返回的sku数据得......
  • Vue-生命周期函数
    生命周期函数相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数beforeCreatecreatedbeforeMountmo......
  • Vue-过滤器
    过滤器filter主要用于数据展示之前的处理 过滤器只能用在v-bind或者插值表达式中<body> <divid="app"> <h2>{{data1}}</h2> <inputv-model="data2"......
  • Vue-计算属性
    计算属性把computed中的方法当做属性使用,会返回一个数据供使用<divid="app"> <p>{{msg}}</p> <p>方法获取的年龄:{{getAge()}}</p> <p>计算属性获取的年......
  • vue3+ts 为原型上添加属性声明
    背景比如在vue2的情况下我们有的时候需要为Vue的原型对象上添加属性或方法,vue3的情况下需要为app挂载全局属性配置,但是结合了ts后,在vue文件中会报警告,但是程序可以正常被......
  • Vue-双向数据绑定
    双向数据绑定的源代码<body> <divid="app"> <p>{{data1}}</p> <inputname=""id="":value="data1"@input="fn"> </div> </body> <script> newVue({ ......
  • 自定义分库分表组件
    目录分库分表设计概要多数据源配置自定义注解+AOP切面实现分库操作分库分表算法选择Hash算法斐波那契数列黄金分割Mybatis拦截器实现分表操作效果测试上一节讲到了分库分......