vue 父传子 props异步造成的问题，及解决方案

最新推荐文章于 2024-03-24 11:11:16 发布
最新推荐文章于 2024-03-24 11:11:16 发布
阅读量2.2k 收藏 6
点赞数 4
分类专栏： vue 项目 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58861443/article/details/119707299
版权
前端 同时被 3 个专栏收录
49 篇文章 1 订阅
订阅专栏
项目
44 篇文章 0 订阅
订阅专栏
vue
30 篇文章 0 订阅
订阅专栏

创建后created 发送请求，获取数据，点击取消后，创建的组件没有被销毁，（编辑数据，由于数据回填动作写在created中，子组件用dialog包裹，导致数据回填不正确，props的执行是异步的）

  • 解决方法1 v-if 销毁重建。会自动执行created 在组件上创建属性 v-if =“showDiaglo” ，关闭弹出层后进行组件销
  • 解决方法2 在父组件里，点击编辑后，找到子组件，调用获取详情方法
    • 如何在父组件中调用子组件方法 ref
      • 父组件 this.$refs.子组件名字.方法
      • 子组件添加ref属性 ref=“方法”
  • props的传递是异步的
  • this.$nextTick(( )=>{把异步变成同步 })
run-Ameng
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue2父组件传递props异步数据到子组件的问题
08-30
本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
知识点：props的传递是异步的
haodanzj的博客
08-13 689
props的传递是异步的 目标 理解props的传递是异步的 问题 // 父组件 <son ref="refSon" :id="num" /> <button @click="changeID">修改id</button> data() { return { num: 1 } } methods: { changeID(){ this.num = 2 console.log(this.$refs.refSon.id) // 1 } } //
Vue3父组件props数据更新后，子组件未更新
最新发布
KARLGong的博客
03-24 412
在使用Vue3的props进行父子组件通信时，父组件更新了props，却没有反映在子组件中。的，但都没有用或太麻烦。最终在Stack Overflow的一个问题的角落里找到了原因：参考。，这种情况下子组件的值就不会随父组件的变化而变化。只需要让父组件初始化时。的值为空字符串，子组件加载时其prop值就会为。看了网上很多解决方案，有说用。其实原因是父组件初始化时。的值不为空字符串即可。
Vue父子组件传值的一些坑
10-14
主要介绍了Vue父子组件传值的一些坑，帮助大家更好的理解和使用vue父子组件，感兴趣的朋友可以了解下
1.解决父组件传数据给子组件太慢，导致子组件获取不到合适数据渲染出错问题2.vue中props传递异步数据，子组件用watch监听
m0_55049655的博客
12-26 648
vue中props传递异步数据，子组件用watch监听
vue3 父传子异步数据子组件不更新问题
qq_36849609的博客
05-31 4444
目的实现父组件异步获取数据后传递给子组件，子组件能做出响应，目前不做任何处理的情况下，父组件异步像子组件传递一个数字时，子组件的props值会更新，但search.column不会更新，如下图。封装了一个select的组件，在父组件调用时传入parentValue。子组件中search.column绑定parentValue。最终子组件的select选择器绑定search.column。子组件定义props接收parentValue。父组件页面加载时获取接口数据并赋值给form。
vue 父子组件传值,子组件获取不到props值
潇湘子的博客
08-31 9159
问题: 父组件props传值给子组件，子组件在created中获取不到传过来的值 关于props传值，这里不赘述直接看官网：https://cn.vuejs.org/v2/guide/components-props.html 分析：因为父组件props传给子组件的值是通过后端接口返回的数据，也就是说是异步返回的数据，那么问题来了，你怎么知道后端什么时候请求完成，然后完成赋值呢？所以导致取值不同步，当然获取不到。 解决方案： 1.可以用setTimeout来延时，等异步请求数据完成了，在赋值(不推荐) 写一
Vue父子组件prop传值时的问题
一个不会射日的后羿
09-13 1285
Vue父子组件prop传值时的问题
vue中父组件异步数据通过props方式传递给子组件，子组件接收不到的问题
weixin_43290151的博客
05-24 9593
vue中父组件异步数据通过props方式传递给子组件，子组件接收不到的问题 问题描述 组件化开发中经常用到父子组件的通信，父传子子传父等数据的操作，如果父组件的数据是发请求从后端获取的异步数据，那么父组件将这个数据传递给子组件的时候，因为是异步数据，就会出现父组件传递过去了，但是子组件mounted钩子初始情况下是接收不到的问题。本篇文章记录了一下这个问题的解决方案。 在说这个问题之前，我们先来回顾一下父子组件的生命周期 父子组件生命周期执行顺序 加载渲染数据过程父组件 beforeCreate -
解决vue中父组件通过props向子组件传递数据，子组件接收不到
CYL_2021的博客
05-04 6574
问题：父组件在挂载时向后端发起请求获取数据，然后将获取到的数据传递给子组件，子组件想要在挂载时获取数据，获取不到
vue父组件传参给子组件，子组件中获取不到。
zc135565的博客
12-30 8930
在项目中，遇到vue父子组件的传参问题，父组件传参给子组件，子组件在created和mounted等生命周期中获取不到，也无法使用父组件传递过来的参数。 父组件传参，一般分为两种情况： 1、父组中的原始数据 (即定义在父组件data中的原始数据),传输给子组件使用，子组件在生命周期中是可以获取并使用的。 2、父组件传给子组件的参数，是从接口中获取到的， 可能遇到的问题就是，如果在组件的create...
Vue的props父传子的示例代码
10-15
主要介绍了Vue的props父传子的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue父组件异步获取数据传给子组件的方法
10-18
主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
解决vue 子组件修改父组件传来的props值报错问题
10-16
今天小编就为大家分享一篇解决vue 子组件修改父组件传来的props值报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element UI关于 input禁止编辑
热门推荐
m0_58861443的博客
08-23 1万+
方法1: 添加 readonly 属性 readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。 <el-form-item label="部门" prop="departmentName"> <el-input readonly v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="hFocus"
addRoutes的基本使用
m0_58861443的博客
08-31 6858
// 动态生成路由 router.addRoutes([路由配置对象]) 或者 this.$router.addRoutes([路由配置对象]) 示例， 点击按钮，跳转abc页面 <button @click="hAddRoute"> addRoutes </button> hAddRoute(){ this.$router.addRoutes([{ path:'/abc', component:()=>import('@/views/abc')
JavaScript getDay()与getDate()
m0_58861443的博客
08-31 5365
JavaScript getDay() 方法 getDay() 方法可返回表示星期的某一天的数字。 // 语法 ：dateObject.getDay() // 返回值 // dateObject 所指的星期中的某一天，使用本地时间。返回值是 0（周日） 到 6（周六） 之间的一个整数。 注释：该方法总是结合一个 Date 对象来使用 例子 var d = new Date(); var n = d.getDay(); // 返回一周的某一天数字 getDate() 方法 getDate() 方法
Js对象的赋值
m0_58861443的博客
08-17 5104
let obj={a:1} let obj2=obj obj2.a=100 console.log(obj.a)//100 //对象的结构赋值 ... let obj={a:1} let obj2={...obj} obj2.a=100 console.log(obj.a)//1 数据存放 1.基本类型的变量是存放在栈区的（栈区指内存里的栈内存） 2.引用类型的值是同时保存在栈内存和堆内存中的对象 对象引用 当从一个变量向另一个变量赋值引用类型的值时，同样也会将存储..
ant-design-vue Table组件去掉自带分页器
m0_58861443的博客
05-13 2498
ant-design-vue Table组件去掉自带分页器 去除分页器只需要一行代码 :pagination=“false” <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false" //去除自带分页器
vue父传子props传不过去
06-08
如果你遇到了vue父传子props传不过去的问题，可能有以下几种原因： 1. 父组件没有正确绑定props属性，可以在子组件的props中设置默认值或者必填属性，确保父组件传递的数据类型正确。 2. 父组件传递的props属性名与子组件中声明的props属性名不一致，需要保持一致。 3. 父组件传递的props属性值为undefined或null，需要确保传递的数据正确。 4. 子组件没有正确引用父组件传递的props属性，需要在子组件的template中正确引用props属性。 希望以上几点能够帮助你解决vue父传子props传不过去的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值