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”);
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue this.reload 方法 配置，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加,api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护,下面这篇文章主要给大家介绍了关于axios二次封装的详细过程与跨域问题的相关资料,需要的朋友可以参考下2022-09-09
在现代 Web 应用中,Tab 页签功能是非常常见的一种交互模式,它可以帮助用户在不同的视图间快速切换,而不会丢失当前视图的状态,本文将介绍如何在 Vue 项目中实现一个带有缓存功能的 Tab 页签功能,需要的朋友可以参考下2024-08-08
这篇文章主要给大家介绍了关于利用vue+turn.js实现翻书效果的相关资料,turn.js是使用了jquery书写的,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了如何利用Vue实现上拉加载下一页效果，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下2022-08-08
由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长,为了解决这个问题,Vue 提供 vuex,这篇文章主要给大家介绍了关于vuex项目中登录状态管理的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要为大家介绍了vue3中如何使用shaka-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
在配置路有的时候，陆续出现了各种报错其中最多的是一些写法，例如空格，缩进，各种括号，这篇文章主要介绍了关于vue的语法规则检测报错问题的解决，非常具有实用价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了详解vue2.0 资源文件assets和static的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了vue如何动态修改$router参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论