组件参数校验与非props属性
一、组件的参数校验
- 子组件如何对组件进行约束
父组件通过属性的方式对子组件传递内容数据，而子组件通过props的方式对数据进行接收，这时，子组件可以组件中的props传参的规则，设定属性的数据类型：
单一数据类型的参数校验
如： 指定content必须为字符串
<div id="app">
<child content="hello world"></child>
</div>
Vue.component('child', {
props:{
content:String
},
template: '<div>{
{content}}</div>',
data() {
return {
message: '这是一个实例数据'
}
}
})
多种数据类型的参数校验
如： 指定content可以为字符串或者数字类型
Vue.component('child', {
props:{
content:[String,Number]
},
template: '<div>{
{content}}</div>',
data() {
return {
message: '这是一个实例数据'
}
}
})
复杂的参数校验
props: 接收属性，为一个对象，可以设置参数
type:表示所传数据的类型
required:true(表示该属性是必传)
default: 'default' (提醒父组件并没有该属性传递)
validator (自定义校验器，表示对传入属性的进行校验)
如下：
Vue.component('child', {
props:{
content:{
type:String, //表示类型必须为 String
required:true, //true 表示属性必传 false表示可以不传属性
default:'默认内容', //提醒父组件并没有属性传递
validator:function(res){
return (res.length >5 ) //自定义校验器，表示对传入属性的进行校验长度
}
}
},
template: '<div>{
{content}}</div>',
data() {
return {
message: '这是一个实例数据'
}
}
})
二、非props特性
非props 特性，父组件通过属性向子组件传递数据时，在子组件接收时，并没有声明props属性来接收数据
<div id="app">
<child content="hello world"></child>
</div>
Vue.component('child', {
template: '<div>{
{content}}</div>',
data() {
return {
message: '这是一个实例数据'
}
}
})
会出错：父组件中的content未被定义
其特点如下：
1、组件未定义props进行接收父组件属性传来的值，那么这个属性（如content）则为非props特性。
2、父组件使用一个非props特性，子组件没有通过props接收属性数据，该属性则会展现在子组件template中的页面模板的dom标签的属性中。
三、props特性
props特性，父组件通过属性向子组件传递数据时，在子组件接收时，在props中声明接收了这个属性数据
<div id="app">
<child content="hello world"></child>
</div>
Vue.component('child', {
props:['content'],
template: '<div>{
{content}}</div>',
data() {
return {
message: '这是一个实例数据'
}
}
})
其特点如下：
1. 子组件所带的属性传递是不会出现在dom上
2. 父组件通过属性传值后，子组件就会通过template中的插值表达式或者通过this.content去取得该属性中的内容