vue.js的组件参数检验与非props特性说明

学前疑问: 什么是组件参数检验? 组件参数校验都有哪些属性设置?分别表示什么意思? 什么是props特性?何为非props特性?如何判断? 重要代码讲解如下: 父组件通过属性content向子组...
学前疑问:

什么是组件参数检验?

组件参数校验都有哪些属性设置?分别表示什么意思?

什么是props特性?何为非props特性?如何判断?


重要代码讲解如下:

父组件通过属性content向子组件chhild进行参数hello world的传递,

而子组件可以对父组件传递过来的内容进行约束。

通过props可以进行约束设置:

比如:约束父组件传过来的content属性值为string类型?


props: {
    content: String  //约束为字符串类型
}


props: {
    content: Number  //约束为数字类型
}


props: {
    content: [Number, String] //约束为数字或字符串类型
}


当然,也可以使用下面的写法,虽然浏览器控制台会报错,但也是可以的:


props: {
    content: {
        type: String, //约束为 字符串类型
        required: false, //约束为 必传数据
        default: 'default value',
        validator: function(value) { //自定义校验,约束长度必须大于5,否则返回false
            return (vaule.length > 5) //自定义校验规则;若校验通过return返回true,否则返回false
        }
    }
}


通过学习上述代码,理解记忆几个重点:

类型type的校验

必传项required的使用设置

默认值default的使用设置

比较复杂的自定义校验器validator的使用设置

所谓props特性:简单说就是定义的content=”hello world”,经过H5页面解析之后,不会且不存在于html标签内作为属性!反之就是非props特性,就会以属性的方式,存在于html标签内,这一点可以通过浏览器控制台查看代码的解析效果去理解。

以上就是关于 “ 组件参数检验与非props特性 ” 的全部内容。

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章