返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue子组件中mounted取不到props中的值情况
  • 454
分享到

vue子组件中mounted取不到props中的值情况

2024-04-02 19:04:59 454人浏览 安东尼
摘要

目录子组件mounted取不到props的值方法一方法二(建议)组件props第一次取不到值给值加上sync使用v-if在子组件里使用watch子组件mounted取不到props的

子组件mounted取不到props的值

问题:传到子组建到数据是从接口调用的,导致创建页面的时候把空对象或者数组传给了子组件

方法一

用watch来监听props中值是否有变化

方法二(建议)

调用子组件的时候加上v-if判断,判断数组或者对象是否存在数据

组件props第一次取不到值

给值加上sync

<el-dialog title="测试" :visible.sync="dialog" width="40%">
      <room-Checked @event1="change($event)" :date.sync="date" /> 
    </el-dialog>

使用v-if

<el-dialog title="测试" :visible.sync="dialog" width="40%">
      <room-Checked @event1="change($event)" :date.sync="date" v-if="data.length > 0" /> 
    </el-dialog>

记得在data里先定义一下 data= []

在子组件里使用watch

props:[ data ]
  watch: {
    date (newValue, oldValue) {
      if (newValue !== oldValue) {
          this.id = this.data[0].id
        console.log('date', this.id)
      }
    }
  },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue子组件中mounted取不到props中的值情况

本文链接: https://lsjlt.com/news/146986.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue子组件中mounted取不到props中的值情况
    目录子组件mounted取不到props的值方法一方法二(建议)组件props第一次取不到值给值加上sync使用v-if在子组件里使用watch子组件mounted取不到props的...
    99+
    2024-04-02
  • vue子组件中mounted取不到props中的值怎么解决
    本文小编为大家详细介绍“vue子组件中mounted取不到props中的值怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue子组件中mounted取不到props中的值怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入...
    99+
    2023-06-30
  • Vue子组件更新props中的属性值问题
    目录Vue子组件更新props的属性值.sync属性v-model应用Vue子组件中修改Props的几种情况针对以上几种情况再逐一进行分析结果展示结论Vue子组件更新props的属性...
    99+
    2022-11-13
    Vue子组件 更新props属性值 Vue props属性值
  • vue在mounted拿不到props中传递的数据问题
    目录vue mounted拿不到props中传递的数据vue props传值问题 created mounted watch父组件子组件Child数据渲染问题props总结最后vue...
    99+
    2023-03-24
    vue mounted vue props传递的数据 vue mounted props传递数据
  • vue父组件异步传递props值,子组件接收不到解决方案
    目录父组件异步请求数据之后传值给子组件,子组件接收不到这里有两种解决思路父组件传递props异步数据到子组件遇到的问题状况一案例二父组件异步请求数据之后传值给子组件,子组件接收不到 ...
    99+
    2022-11-13
    vue父组件异步 vue传递props值 子组件接收不到
  • vue在mounted拿不到props中传递的数据怎么解决
    这篇文章主要介绍“vue在mounted拿不到props中传递的数据怎么解决”,在日常操作中,相信很多人在vue在mounted拿不到props中传递的数据怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答...
    99+
    2023-07-05
  • vue组件props属性监听不到值变化问题
    目录props属性监听不到值变化问题props监听变化的几种方式应用场景1.computed 计算属性2.methods 方法3.watch 侦听器props属性监听不到值变化问题 ...
    99+
    2024-04-02
  • vue2.0中子组件如何改变props值并向父组件传值
    这篇文章主要介绍了vue2.0中子组件如何改变props值并向父组件传值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。为什么我们会有修改 p...
    99+
    2024-04-02
  • vue子组件如何获取父组件的内容(props属性)
    目录子组件如何获取父组件的内容props属性vue父→子组件的props传值需求1需求2子组件如何获取父组件的内容 props属性 组件实例的作用域是孤立的。这意味着不能并...
    99+
    2024-04-02
  • 关于@Value注解取不到值的几种情况
    目录@Value注解取不到值的几种情况几种获取不到值的特殊情况如下@Value取不到值的原因可能原因有正确方式@Value注解取不到值的几种情况 在spring的框架中,我们经常使用...
    99+
    2024-04-02
  • vue3中的组件间的传值(props)
    目录vue3组件间的传值(props)父组件向子组件传值子组件向父组件传值(常规)子组件向父组件传值(v-model)vue3组件之间传值和事件处理下面介绍子组件传值总结vue3组件...
    99+
    2023-05-17
    vue3 props vue3组件间传值 组件传值vue3
  • vue如何通过props方式在子组件中获取相应的对象
    目录方法一所以就可以直接拿取方法二有时候会获取不到,可以用一个定时器来获取方法三深拷贝方法四利用watch监听这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就...
    99+
    2024-04-02
  • vue怎么通过props方式在子组件中获取相应的对象
    本文小编为大家详细介绍“vue怎么通过props方式在子组件中获取相应的对象”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么通过props方式在子组件中获取相应的对象”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-06-30
  • vue activated在子组件中的使用详情
    页面:base: <template> <div class="tab-container"> <h1 style="text-ali...
    99+
    2024-04-02
  • vue3父子组件传值中props使用细节浅析
    目录setup函数的参数一、父组件要给子组件传值时,可以通过props来完成组件的通信二、子组件给父组件传值总结setup函数的参数 它主要有两个参数: 第一个参数:props :父...
    99+
    2024-04-02
  • vue中父组件如何给子组件传值
    小编给大家分享一下vue中父组件如何给子组件传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一般情况下我们父子之间的传值用的是...
    99+
    2024-04-02
  • vue中子组件怎么向父组件传值
    vue中子组件怎么向父组件传值,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一,子组件主动触发事件将数据传递给父组件1,在子组件上绑定某个事件以及事件触发的函数子组件代码&...
    99+
    2023-06-20
  • 如何解决vue子组件修改父组件传来的props值报错问题
    这篇文章主要介绍如何解决vue子组件修改父组件传来的props值报错问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue不推荐直接在子组件中修改父组件传来的props的值,会报错...
    99+
    2024-04-02
  • vue中实现子组件接收父组件方法并获取返回值
    目录子组件接收父组件方法并获取返回值父组件 GetCallback.vue子组件 CallbackChild1.vue子组件接收父组件的另一种方法子组件接收父组件方法并获取返回值 项...
    99+
    2022-11-13
    vue子组件 子组件接收父组件 vue获取返回值
  • Vue3中怎么修改父组件传递到子组件中的值
    这篇文章主要介绍了Vue3中怎么修改父组件传递到子组件中的值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中怎么修改父组件传递到子组件中的值文章都会有所收获,下面我们一起来看看吧。自定义组件上使用v-m...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作