旅游管理App开发 第三天:技术点汇总以及遇到问题的解决办法

1. vue-cli 3版本没有static文件夹,本地文件应放在哪儿,如何引用

  • 原来放在static下的文件,现在应该放在public文件夹下
    在这里插入图片描述
  • 引用方法

在这里插入图片描述


2.Eslint 问题重现(定义了变量并使用了,但是eslint还是报定义过了但是未使用的错误)

出现如下报错:

eslint react xxx is assigned a value but never used
  • 解决方法

设置.eslintrc.js的"no-unused-vars"规则为禁用(0为禁用)。具体可以看这里

{
  "rules":{
    "no-unused-vars":0
  }
}

在这里插入图片描述


3. vue 父组件向子组件传参 props 参数效验

以下内容部分转载于:https://blog.csdn.net/zuomengjia/article/details/102786442

  • 如果希望每个 prop 都有指定的值类型,可以以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型,如下所示:
    在这里插入图片描述当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告

  • 父组件向子组件传值时,子组件有权对传递的内容进行相关约束,这个过程便是组件的参数校验。

在这里插入图片描述


  • 子组件接收的数据类型为数字或者字符串,即传递过来的数据类型要么为Number,要么为String。 此时可以借助数组语法

在这里插入图片描述


  • 参数校验规则除了上述简单的类型与多类型校验外,还可以执行更复杂的校验,如下所示:

在这里插入图片描述


  • require设置为false时,则为非必填项;此外,还可以设置default默认项。

在这里插入图片描述注意:如果父组件传值,则会覆盖默认值

在这里插入图片描述


  • 除了上述校验外,还可以定义更复杂的校验,使用validator(校验器)可以实现自定义校验。

案例:要求所传参数数值必须在18-50之间

扫描二维码关注公众号,回复: 11370950 查看本文章

在这里插入图片描述


猜你喜欢

转载自blog.csdn.net/haduwi/article/details/105740009
今日推荐