阅读 203

Vue基础篇: 组件参数校验与非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去取得该属性中的内容
复制代码
关注下面的标签,发现更多相似文章
评论