Vue组件中参数校验与非props特性的示例分析(vue,web开发)

子组件接收父组件的参数的时候，props注册接收的参数

props:['count']

子组件可以对接收的参数校验。

例如规定接收的count参数要求是String

props:{count:String}

如果count是别的类型就会报错

组件的参数校验

组件的参数校验指的是什么呢？你父组件向子组件传递的内容，子组件有权对这个内容进行一些约束，这个约束我们可以把它叫做参数的校验。

<divid="root"><childcontent="helloworld"></child></div>Vue.component('child',{props:['content'],template:'<div>{{content}}</div>'})letvm=newVue({el:'#root',})

现在有这样一个需求，父组件调用子组件的时候，传递的这个content，我要做一些约束，要求它我传递过来的content必须是一个字符串，我们该怎么实现呢？

<divid="root"><childcontent="helloworld"></child></div>Vue.component('child',{props:{content:String//子组件接收到的content这个属性，必须是一个字符串类型的},template:'<div>{{content}}</div>'})letvm=newVue({el:'#root',})

组件接收到的content这个属性，必须是一个字符串类型的，如果我需要的参数类型是字符串或者数组，又该怎么写呢？

props:{content:[String,Number]},

content的类型，可以用数组来表示。

content其实还有更复杂的用法：

props:{content:{type:Sring,required:true,//必传default:'defaultvalue',//默认显示，非必传会显示validator(value){//检测content的长度，如果长度大于5，正常显示，如果长度小于5则报错return(value.length>5)}}}

非props特性

说到非props特性，它一定和props特性相对应。

props特性：当你的父组件使用子组件的时候，通过属性向子组件传值的时候，恰好子组件里面声明了对父组件传递过来的属性的一个接收，也就是说父子组件有个对应关系，如果你这么写我们就把叫做props特性

props特性的特点是，如下图：

1. 我们在子组件里有一个content的内容传递，这个属性的内容传递是不会在dom标签上进行显示的。

2. 当你父组件传递了content，你子组件接收了这个content，你在模版里就可以直接通过插值表达式或者通过this.content，去取得content里面的内容了。

非props特性：父组件向子组件传递了一个属性，但是子组件并没有props这块的内容，也就是说子组件并没有声明我要接收父组件的传递过来的内容

非props特点：

• 非props特性在子组件里面，没办法获取到你父组件传递的内容，因为你压根没声明你要获取的内容，也就没法用。

• 如果我们用的是非props特性，那么这个特性是会显示在dom标签上的