vue中的传值及赋值问题

目录
  • vue的传值及赋值
    • 先看一下场景
    • 解决方法
  • vue的赋值小技巧
    • 严谨代码
    • undefined判断

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 数据(data)赋值问题的解决方案

    vue 数据(data)赋值问题的解决方案

    总结一下我遇到的一个纠结很久的问题. 在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报错: 原因: 在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined. 解决方案: 一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性 二)使用箭头函数 补充:解决 vue

  • vue传值方式的十二种方法总结

    vue传值方式的十二种方法总结

    目录 一.父传子传递 二.子传父传递 三.兄弟组件通信(bus总线) 四.ref/refs(父子组件通信) 五.Vuex通信 六.$parent 七.sessionStorage传值 八.路由传值 九.祖传孙 $attrs 十.孙传祖使用$listeners 十一.promise传参 十二.全局变量 一.父传子传递 (1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量 (2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props: ["属性

  • vue 中几种传值方法(3种)

    前言 vue项目中,组件跟组件之间数据的传递是很普遍的行为,在这里总结几种常见的vue组件跟组件之间传值方式,其中,主要有父子组件,非父子组件传值. 父组件向子组件传值 方法:父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数props接收即可.具体可参考官方文档. 父组件传递参数代码如下: <template> <center-template :form='userinfo'></center-template&

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • vue中的传值及赋值问题

    vue中的传值及赋值问题

    目录 vue的传值及赋值 先看一下场景 解决方法 vue的赋值小技巧 严谨代码 undefined判断 vue的传值及赋值 作为Vue非资深的学习者,在工作中使用vue的时候还是遇见的很多所谓的坑,打算总结一下:就在昨天PM找到我,给我看了一个bug,很是头疼的是,我看了半天代码就是看不出有什么问题,但是实现起来就是报错. 先看一下场景 这是详情页的tab栏,这里的大概逻辑就是从别的页面跳转到详情页并且需要选中虚拟服务器组这个tab栏,代码的逻辑是先获取详情页信息Detail,然后把detail

  • 解决Vue中 父子传值 数据丢失问题

    在Vue中,父子组件传值,子组件通过props接收父组件传递的数据 父组件 questionList :传递数据参数 questionsLists: 传递数据源 子组件 porps 接收父组件方式有俩中,一种是通过对象形式,一种是通过数组形式,通过数组形式接收多个数据时用逗号隔开即可.比如:props:['a','b']. 需要注意的是在子组件中 接收父组件的数据参数,必须和父组件传递时的 参数一致,上图中的 questionList 这种情况下会出现这么一个情况,刷新页面之后子组件接收的父组件

  • 详解Vue中组件传值的多重实现方式

    vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面

  • vue中formdata传值给后台时参数为空的问题

    vue中formdata传值给后台时参数为空的问题

    目录 formdata传值给后台时参数为空 使用formData时候传递参数是个空值的情况 formData用途 使用formData 具体表单的操作API formdata传值给后台时参数为空 在vue里面使用formData的时候参数值为空,是因为axios是进行了二次封装,所以传递表达的时候会传递一个空表单过去 axios在进行二次封装的时候回影响到原来的表单提交或者文件上传, 所以可以用原生的发请求 // list 是一个对象数组 export const orinCatelogue =

  • vue中img src 动态加载本地json的图片路径写法

    vue中img src 动态加载本地json的图片路径写法

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu

  • vue中使用props传值的方法

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo

  • 详解vue中的父子传值双向绑定及数据更新问题

    详解vue中的父子传值双向绑定及数据更新问题

    在进行父子组件传值时,用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值,视图未发生变化的解决办法,当时完成项目时,一直未找到原因,修改了好久. 1.父子组件传值双向绑定 在传递给子组件中的变量上使用.sync修饰符,就能够实现父子传值的双向绑定 <!-- 父组件 --> <template> <div class="audioCate"> <child :show.sync="showModel" @

  • vue中父子组件注意事项,传值及slot应用技巧

    一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod

  • vue中各种通信传值方式总结

    1.路由通信传值 路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段. 例子:创建并在路由注册一个组件Head <template> <div id="head"> <button @click="handleChange">clickMe</button> //给按钮绑定点击事件 </div> </template> <script> export defau

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

随机推荐