文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中的传值及赋值问题

2024-04-02 19:55

关注

vue的传值及赋值

作为Vue非资深的学习者,在工作中使用vue的时候还是遇见的很多所谓的坑,打算总结一下;就在昨天PM找到我,给我看了一个bug,很是头疼的是,我看了半天代码就是看不出有什么问题,但是实现起来就是报错。

先看一下场景

这是详情页的tab栏,这里的大概逻辑就是从别的页面跳转到详情页并且需要选中虚拟服务器组这个tab栏,代码的逻辑是先获取详情页信息Detail,然后把detail这个对象以props的形式传递给虚拟服务器组这个子组件

export default {
    props:['detail'],
    data(){
        return {
            type: this.detail.type
        }
    },
    methods: {
        XXX(){
        }
    } 
}

我在这里多做了一步,就是讲props里面的属性赋值给了data里面的变量,但是如果我跳转到详情页后立即转到虚拟服务这个tab栏的时候,(此时会立即触发XXX方法,并且会使用type这个变量),此时回报错,就是type是未定义的?

解决方法

直接将props中的detail变量直接拿来使用,不需要赋值给data中的变量,就不会出现这种情况。

深层的原因不清楚,但是初步断定是时间差的问题,在测试的时候发现,这种bug不是必然复现的,时好时坏,直接使用的话避免了这个问题。

vue的赋值小技巧

严谨代码

严谨性即健壮性,是指软件对于规范要求以外的输入情况的处理能力。所谓的系统是指对于规范要求以外的输入能够判断出这个输入不符合规范要求,并能有合理的处理方式。

另外健壮性有时也和容错性,可移植性,正确性有交叉的地方。

比如,一个软件可以从错误的输入推断出正确合理的输入,这属于容错性量度标准,但是也可以认为这个软件是健壮的。

undefined判断

JS 和 Vue中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断。

以下是不正确的用法:

var exp = undefined;
if (exp == undefined)
{
alert(“undefined”);
}

exp 为 null 时,也会得到与 undefined 相同的结果,虽然 null 和 undefined 不一样。注意:要同时判断 undefined 和 null 时可使用本法。

var exp = undefined;
if (typeof(exp) == undefined)
{
alert(“undefined”);
}

以下是正确的用法:

var exp = undefined;
if (typeof(exp) == “undefined”)
{
alert(“undefined”);
}

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯