在父组件向子组件传值的时候,子组件会使用 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会发出警告
}
}
第三种更详细的对象方式:
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 的属性。
禁止属性的继承
子组件设置 inheritAttrs 选项,则可以禁止继承父组件的数据,即使子组件没有接收父组件的属性,父组件传入的属性也不会出现在子组件dom的父元素上。
如下实例:
<template>
<div>
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
name: {
type: String,
default: ''
}
}
}
</script>
结果: