1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之组件 props 参数校验

Vue教程之组件 props 参数校验

在父组件向子组件传值的时候,子组件会使用 props 来接收父组件传递来过的参数,这个参数我们是可以根据我们的需求,来进行校验和配置属性的。例如,必传、默认值等。

Prop 的大小写

HTML 中的属性名是大小写是不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:

子组件接收参数的三种方式

第一种数组的方式:

第二种指定类型:

Vue教程之组件 props 参数校验

第三种更详细的对象方式:

自定义验证参数

参数类型

常用类型实例演示:

Vue 原生构造函数的类型:

  • String // 字符串
  • Number // 数字
  • Boolean // 布尔
  • Array // 数组
  • Object // 对象
  • Date // 日期
  • Function // 函数
  • Symbol // 属性

非 Prop 的属性

介绍

一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。

因为显式定义的 prop 适用于向一个子组件传入信息,然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute,而这些 attribute 会被添加到这个组件的根元素上。

例如,想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件,这个插件需要在其 <input> 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上:

然后这个 data-date-picker="activated" attribute 就会自动添加到 <bootstrap-date-input> 的根元素上。

实例演示

父组件

子组件

因为子组件中没有 prop 为 content 的这个属性,所以继承了父组件的特性,如下图,如果在子组件的 props 里接收content 则DOM中就不会有这个属性,如下图子组件没有 name 的属性。

Vue教程之组件 props 参数校验

禁止属性的继承

子组件设置 inheritAttrs 选项,则可以禁止继承父组件的数据,即使子组件没有接收父组件的属性,父组件传入的属性也不会出现在子组件dom的父元素上。

如下实例:

结果:

Vue教程之组件 props 参数校验
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注