• vue 类型检查Prop 验证


    我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

    为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:

    app.component('my-component', {
      props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
          type: String,
          required: true
        },
        // 带有默认值的数字
        propD: {
          type: Number,
          default: 100
        },
        // 带有默认值的对象
        propE: {
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function() {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function(value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        },
        // 具有默认值的函数
        propG: {
          type: Function,
          // 与对象或数组默认值不同,这不是一个工厂函数 —— 这是一个用作默认值的函数
          default: function() {
            return 'Default function'
          }
        }
      }
    })

    当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。

    提示

    注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 datacomputed 等) 在 default 或 validator 函数中是不可用的。

    #类型检查

    type 可以是下列原生构造函数中的一个:

    • String
    • Number
    • Boolean
    • Array
    • Object
    • Date
    • Function
    • Symbol

    此外,type 还可以是一个自定义的构造函数,并且通过 instanceof 来进行检查确认。例如,给定下列现成的构造函数:

    function Person(firstName, lastName) {
      this.firstName = firstName
      this.lastName = lastName
    }

    你可以使用:

    app.component('blog-post', {
      props: {
        author: Person
      }
    })
  • 相关阅读:
    爬虫(Xpath)——爬tieba.baidu.com
    爬虫(正则)——爬neihan8
    爬虫(cookie)——renren模拟登陆
    爬虫(ProxyHandler)——代理
    爬虫(GET)——handler处理器和自定义opener
    爬虫(AJEX)——豆瓣动态页面
    爬虫(POST)——有道翻译(有bug)
    一次跨域请求出现 OPTIONS 请求的问题及解决方法
    现代JS中的流程控制:详解Callbacks 、Promises 、Async/Await
    nodejs中的子进程,深入解析child_process模块和cluster模块
  • 原文地址:https://www.cnblogs.com/huifeidezhuzai/p/16416339.html
Copyright © 2020-2023  润新知