Vue基础篇: 组件参数校验与非props属性

1、组件的参数校验

• 子组件如何对组件进行约束

父组件经过属性的方式对子组件传递内容数据，而子组件经过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: '这是一个实例数据'
            }
        }
    })
复制代码

2、非props特性

非props 特性，父组件经过属性向子组件传递数据时，在子组件接收时，并无声明props属性来接收数据

<div id="app">
         <child content="hello world"></child>        
    </div>

  Vue.component('child', {
        template: '<div>{{content}}</div>',
        data() {
            return {
                message: '这是一个实例数据'
            }
        }
    })
复制代码

会出错：父组件中的content未被定义

其特色以下：

一、组件未定义props进行接收父组件属性传来的值，那么这个属性（如content）则为非props特性。

二、父组件使用一个非props特性，子组件没有经过props接收属性数据，该属性则会展示在子组件template中的页面模板的dom标签的属性中。
复制代码

3、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去取得该属性中的内容
复制代码