返回顶部
首页 > 资讯 > 前端开发 > JavaScript >使用props传值时无法在mounted处理的解决方案
  • 877
分享到

使用props传值时无法在mounted处理的解决方案

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

目录props传值无法在mounted处理的解决遇到的问题解决Vue笔记(props和mounted)1.mounted2.propsprops传值无法在mounted处理的解决 遇

props传值无法在mounted处理的解决

遇到的问题

父组件传值,在子组件中不能用mounted处理

export default{
    props:['floor1'],
    data(){
        return {
            floor1_0:'',
            floor1_1:'',
            floor1_2:'',
        }
    },
    mounted(){
        console.log(this.floor1)             //打印出的不是所传的值
        this.floor1_0 = this.floor1[0];      
    }
}

因为props为异步传值(就是在父组件没有加载完数据时,floor1就传递到了子组件,此时floor1还没被附上值,先执行了子组件的mounted),而mounted执行一次后无法改变floor1的值。

解决

使用侦听器watch,当floor1改变时,重新计算

watch:{
    floor1:function(val){
        this.floor1_0 = val[0];
        this.floor1_1 = val[1];
    }
}

vue笔记(props和mounted)

1.mounted

1.1mounted中使用$nextTick会导致页面挂掉

mounted() {
// 页面卡死
    this.$nextTick(() => {
      this.setUrl()
    })
  }

2.props

2.1props传过去的值,第一时间在mounted是获取不到的。因为是异步传值的。

解决方法:

(1)使用watch

(2)将需要进行的处理在父组件进行操作,然后将操作完的值直接传给子组件。

watch: {
   datas: function (val) {
      
    }
  }
或
(父)
 <exaMachSearchHeader :exprotUrl="exprotUrl"></examAchSearchHeader>
 ...
this.exportUrl = XXXX
(子)
props: {
    exportUrl: String
}

2.2通过props传给子组件的值变化后子组件接收到 和 通过refs访问子组件方法中使用接收到的参数变化的顺序问题

通过refs访问时,接收到的参数是变化前的参数。还是因为异步的问题。可以强制赋值改变,或用watch等。

 // parent
 <examAchTable ref="achTable" :dataList="examAchList"></examAchTable>
 
 // 若这里不强制赋值一下,在examAchList变化后直接调用子组件的transData方法时,子组件dataList仍是变化前的值
 this.$refs.achTable.dataList = this.examAchList
 this.$refs.achTable.transData(res.data.totalRecord)
 
 // child
 transData(total) {
      if (this.dataList) 
    // ...
}

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

--结束END--

本文标题: 使用props传值时无法在mounted处理的解决方案

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

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

猜你喜欢
  • 使用props传值时无法在mounted处理的解决方案
    目录props传值无法在mounted处理的解决遇到的问题解决vue笔记(props和mounted)1.mounted2.propsprops传值无法在mounted处理的解决 遇...
    99+
    2024-04-02
  • 使用props传值时无法在mounted处理怎么解决
    这篇文章主要介绍了使用props传值时无法在mounted处理怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇使用props传值时无法在mounted处理怎么解决文章都会有所收获,下面我们一起来看看吧。p...
    99+
    2023-06-30
  • Collectors.toMap方法value值为null时的解决方案
    问题 发现Collectors.toMap的一个坑,key可以为null,但value不能为null,否则抛空指针异常nullPointerException。这可真是反直觉。 原因 解决方案 方案...
    99+
    2023-09-29
    java stream
  • canvas无法使用rem单位的解决方案
    这篇文章主要介绍“canvas无法使用rem单位的解决方案”,在日常操作中,相信很多人在canvas无法使用rem单位的解决方案问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • PHP在Ubuntu上无法启动的解决方案
    PHP在Ubuntu上无法启动的问题是很常见的,可能是由于配置错误、插件冲突或者服务未正确启动等原因导致的。为了解决这个问题,我们需要逐步排查可能的原因,并根据具体情况进行相应的调整和...
    99+
    2024-02-28
    ubuntu php 解决方案: 启动
  • 在webservice里调用耗时方法出错的解决方案
    webservice调用耗时方法出错 在webservice里调用多个耗时的方法时,如果按顺序执行,下面的方法要等上面的方法执行完毕才能执行,如果这些方法比较耗时,并且包括回调等异步...
    99+
    2024-04-02
  • lombok插件无法使用的原因及解决方案
    lombok插件无法使用的原因及解决 近日使用了一个lombok的插件,中间遇到无法插件无法使用的情况,于是将自已遇到的问题以及解决办法写下来: 在项目中如果使用注解 ,比如 @Se...
    99+
    2024-04-02
  • win10系统usb键盘无法使用的解决方案
    有许多人在使用win10操作系统时,是否遇到过usb键盘无反应的情况,还不清楚。想知道如何处理win10系统的USB键盘无法使用问题吗?今天我将与你分享解决方案~。win10系统usb键盘无法使用的解决方法:首先在桌面上找到这台电脑,鼠标右...
    99+
    2023-07-18
  • mybatis空值插入处理的解决方法
    适用于入参类型为对象的 刚学习完mybatis如何插入空值,现在来总结一下 上面是我的项目,打开测试类,插入空值试一下 上面是我的Mapper文件、实体类和测试类,方法传的是...
    99+
    2024-04-02
  • mysql安装时无法启动服务的解决方案
    这篇文章给大家介绍mysql安装时无法启动服务的解决方案,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、解压文件下载好MySQL后,解压到D盘下,也可以根据个人喜好解压在其他盘符的路...
    99+
    2024-04-02
  • Java处理延时任务的常用几种解决方案
    目录前言数据库轮询原理优缺点Java延迟队列Reids监听失效key创建监听类,实现MessageListener接口RocketMq延迟消息总结前言 项目中经常会遇到如下的需求: ...
    99+
    2024-04-02
  • @PropertySource 无法读取配置文件的属性值解决方案
    原来Person类这样写: 只写了@PropertySource注解 @Component @PropertySource(value = {"classpath:person....
    99+
    2024-04-02
  • Spring Cloud中使用Feign,@RequestBody无法继承的解决方案
    目录使用Feign,@RequestBody无法继承的问题原因分析解决方案使用feign遇到的问题1、示例2、首次访问超时问题3、FeignClient接口中使用Feign,@Req...
    99+
    2024-04-02
  • Linux 无法使用userdel 删除用户和组的解决方案
    Linux 无法使用userdel 删除用户和组的解决方案 简述: 今天在看书的时候,看到有个实例,手痒痒的跟着做了起来。。。但是,出现问题了。。测试的用户和组不能删除。。 情况: 一般我们移除,都是先...
    99+
    2022-06-04
    解决方案 用户 Linux
  • MybatisPlus修改时空字段无法修改的解决方案
    目录MybatisPlus空字段无法修改点开修改这个时候,在实体类中加入这行注释的意思是Mybatis-Plus修改指定字段核心代码MybatisPlus空字段无法修改 点开修改 ...
    99+
    2024-04-02
  • 在pycharm中无法import所安装的库解决方案
    step1:在file中找到default settings step2:找到Project Interpreter step3:按照如图步骤搜索并找到需要安装的模块 step...
    99+
    2024-04-02
  • Java处理延时任务的解决方案有哪些
    本篇内容介绍了“Java处理延时任务的解决方案有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!数据库轮询原理通过一个线程定时的扫描数据库...
    99+
    2023-06-30
  • 在使用 zabbix 4 时, orabbix 会报错的处理方法
    https://github.com/hsnotebook/orabbix4zabbix4在使用 zabbix 4 时, orabbix 会报错:Orabbix - received unexpected&nb...
    99+
    2023-06-05
  • Win7计算机管理无法打开的解决方案
    当我们使用Win7系统右键点击计算机管理时,有时会弹出文件没有相关程序执行操作无法打开管理系统,只能绕道从控制面板打开,非常麻烦和不方便,下面由小边介绍Win7计算机管理无法打开解决方案。Win7计算机管理无法打开的解决方案按Win+R快捷...
    99+
    2023-07-10
  • await/async无法捕获与处理错误信息的解决方案分享
    目录前言同步和异步异步任务所存在的问题Promise如何解决回调地狱async/await,回调地狱的最终方案async/await错误处理方案第一种,手动添加啊try{}catch...
    99+
    2023-02-03
    async await捕获错误 async await错误处理 async await用法
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作