vue中的传值及赋值问题

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”);
}

频道导航