vue中的传值及赋值问题
作者:yikewang2016 时间:2024-05-28 15:45:32
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”);
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。
来源:https://blog.csdn.net/yikewang2016/article/details/81772338


猜你喜欢
python学习之编写查询ip程序

Python timer定时器两种常用方法解析
如何在vue中使用ant-design-vue组件

python 限制函数调用次数的实例讲解
uni-app使用countdown插件实现倒计时

python2爬取百度贴吧指定关键字和图片代码实例
php strstr查找字符串中是否包含某些字符的查找函数
php集成环境xampp中apache无法启动问题解决方案

解决pip install xxx报错SyntaxError: invalid syntax的问题

OpenCV 边缘检测

浅谈Python中re.match()和re.search()的使用及区别

交互设计模式——分页

详解使用CUDA+OpenCV加速yolo v4性能

Python科学画图代码分享

idea+git合并分支解决冲突及详解步骤

对Python 多线程统计所有csv文件的行数方法详解
SQL Server正确删除Windows认证用户的方法

layDate插件设置开始和结束时间
WEB2.0网页制作标准教程(9)第一个CSS布局实例

OpenCV半小时掌握基本操作之图像轮廓
