vue优化之优雅的抛出错误(Error)问题

 更新时间:2024年03月06日 09:37:36   作者:勇敢小陈  
这篇文章主要介绍了vue优化之优雅的抛出错误(Error)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue优雅的抛出错误(Error)

在开发工程中,往往有些地方需要我们进行错误的抛出,

例如:

props传递一个参数,我不知道他传递的是啥,而我知道我需要啥,所以我们可以在props中通过检验方法进行错误的抛出,

但可能抛出的问题不够直观所以导致排除困难,这个时候手动定义一个异常错误抛出是明智的选择。

例如

父组件

<template>
  <div>
    <hello-world :name="name" :age="age"></hello-world>
  </div>
</template>
 
<script>
import HelloWorld from '@/components/HelloWorld.vue'
 
export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data(){
    return {
      name:'小陈',
      age:18
    }
  }
}
</script>
 
<style>
 
</style>

子组件

<template>
  <div>{{name}}{{age}}</div>
</template>
 
<script>
export default {
props:{
  "name": {
		type: String,
		default:  'text',
		validator(value) {
     return ['小陈1', 'number','letter'].indexOf(value) > -1
		}
 	},
  age:Number
},
methods:{
  aa(){
    return new Error('5555')
  }
}
}
</script>
 
<style>
 
</style>

报错

虽然报错了,也知道校验失败,但排查起来不一定容易,我知道错了,但我应该给你什么呢?

这个时候我们就可以通过抛出错误来解决

通过throw  new Error进行报错处理或通过console.error()进行报错处理都可以

<template>
  <div>{{name}}{{age}}</div>
</template>
 
<script>
export default {
props:{
  "name": {
		type: String,
		default:  'text',
		validator(value) {
      if(!['小陈1', 'number','letter'].indexOf(value) > -1){
       throw  new Error(`${value}不属于'小陈1', 'number','letter'中的任意值`)
      }
			 
		}
 	},
  age:Number
},
methods:{
  aa(){
    return new Error('5555')
  }
}
}
</script>
 
<style>
 
</style>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 实现穿梭框功能的详细代码

    Vue 实现穿梭框功能的详细代码

    本文给大家介绍Vue 实现穿梭框功能,代码分为css,html和js代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-10-10
  • 利用Vue3实现一个可以用js调用的组件

    利用Vue3实现一个可以用js调用的组件

    最近遇到个功能要求,想要在全局中调用组件,而且要在某些js文件内调用,所以这篇文章主要给大家介绍了关于如何利用Vue3实现一个可以用js调用的组件的相关资料,需要的朋友可以参考下
    2021-08-08
  • mpvue中使用flyjs全局拦截的实现代码

    mpvue中使用flyjs全局拦截的实现代码

    这篇文章主要介绍了mpvue中使用flyjs全局拦截的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue 虚拟DOM快速入门

    vue 虚拟DOM快速入门

    这篇文章主要介绍了vue 虚拟DOM的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • vue在html标签{{}}中调用函数的方法总结及对比

    vue在html标签{{}}中调用函数的方法总结及对比

    这篇文章主要给大家介绍了关于vue在html标签{{}}中调用函数的方法总结及对比,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • Vue批量图片显示时遇到的路径被解析问题

    Vue批量图片显示时遇到的路径被解析问题

    这篇文章主要介绍了Vue批量图片显示时遇到的路径被解析问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue3生命周期函数和方法详解

    Vue3生命周期函数和方法详解

    本文详细讲解了Vue3生命周期函数和方法。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-12-12
  • 详解vue.js之props传递参数

    详解vue.js之props传递参数

    给大家详细分析了vue.js之props传递参数的相关知识以及问题解决方法,需要的朋友参考下吧。
    2017-12-12
  • KKFileView结合vue多格式文件在线预览功能实现

    KKFileView结合vue多格式文件在线预览功能实现

    kkFileView是git的开源在线文件预览项目,这篇文章主要介绍了KKFileView结合vue多格式文件在线预览功能,本文给大家介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • element-ui select多选绑定回显值问题

    element-ui select多选绑定回显值问题

    这篇文章主要介绍了element-ui select多选绑定回显值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论