组件参数校验与非props属性

组件参数校验与非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去取得该属性中的内容