1. 主页
  2. Vue2 教程
  3. Vue教程之组件 props 参数校验

Vue教程之组件 props 参数校验

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

Prop 的大小写

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

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

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

第一种数组的方式:

export default {
  props: ['name', 'content']
}

第二种指定类型:

export default {
  props: {
    content: String // content要求是String,如果是其他类型则Vue会发出警告
  }
}
Vue教程之组件 props 参数校验

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

export default {
  props: {
    content: {
      type: String,   // 指定类型
      required: true, // 是否传递
      default: ''     // 默认值
    }
  }
}

自定义验证参数

export default {
  props: {
    content: {
      type: String,
      required: true,
      default: '',
      validator: function (v) {  // 自定义验证,返回需是布尔值
        return v.length > 3
      }
    }
  }
}

参数类型

常用类型实例演示:

export default {
  props: {
    number: { // 数字
      type: Number,
      default: 0
    },
    string: { // 字符串
      type: String,
      default: ''
    },
    bool: { // 布尔
      type: Boolean,
      default: true
    },
    object: { // 对象
      type: Object,
      default: () => ({})
    },
    array: { // 数组
      type: Array,
      default: () => ([])
    }
  }
}

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 添加到你的组件实例上:

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

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

实例演示

父组件

<template>
  <div>
    <Demo6 name="lanyulei" content="test prop"></Demo6>
  </div>
</template>

<script>
import Demo6 from './components/Demo6'
export default {
  components: {
    Demo6
  }
}
</script>

子组件

<template>
  <div>
    <h1>{{ name }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

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

Vue教程之组件 props 参数校验

禁止属性的继承

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

如下实例:

<template>
  <div>
    <h1>{{ name }}</h1>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

结果:

Vue教程之组件 props 参数校验

我们要如何帮助您?

发表回复

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