vue子组件中mounted取不到props中的值情况
更新时间：2022年04月23日 09:59:51 作者：Luopan13
这篇文章主要介绍了vue子组件中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)
}
}
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本节，我们将讨论关于AST的转换。所谓AST的转换，指的是对AST进行一系列操作，将其转换为新的AST的过程。新的AST可以是原语言或原DSL的描述，也可以是其他语言或其他DSL的描述。例如，我们可以对模板AST进行操作，将其转换为JavaScriptAST2023-01-01
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
这篇文章主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue中的scope使用详解,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了在vue中设置滚动条的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文通过实例代码给大家介绍了vue实现评论列表功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-10-10
这篇文章主要介绍了vue使用axios上传文件(FormData)的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家分享一篇使用vue toggle实现点击切换class的示例。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
解决vue加scoped后就无法修改vant的UI组件的样式问题
这篇文章主要介绍了解决vue加scoped后就无法修改vant的UI组件的样式问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
随着前端技术的飞速发展,Vue.js作为一个流行的JavaScript框架,已经被广泛应用于构建现代Web应用,然而,随着应用的复杂性和规模的增加,性能优化也成为开发者必须面对的重要任务,在本篇博客中,我们将探讨几种常用的Vue性能优化方法,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了vue自定义穿梭框支持远程滚动加载,iview是全局注入，基本使用原先的类名进行二次创建公共组件，修改基础js实现逻辑，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-08-08
最新评论