Vue组件参数验证方法和非道具特性

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

prop :[' count ']子组件可以检查接收到的参数。

例如，规定接收的计数参数必须是字符串

Props: { count3360String }如果count是另一种类型，它将报告一个错误

组件的参数验证

组件的参数验证是什么意思？您的父组件传递给子组件的内容，子组件有权对此内容施加一些约束，我们可以称之为参数验证。

div id='root '子内容=' hello world '/child/divvue.component(' child '，{ props: ['content']，Template 3360 ' div { { content } }/div ' })让VM=newvue ({el3360' # root '，})现在有这样一个要求。当父组件调用子组件时，我必须对传递的内容做一些约束，这就要求我传递的内容必须是字符串。怎么才能实现呢？

div id=' root ' child content=' hello world '/child/div vue。组件(' child '，{ prop s : { content 3360 string//子组件接收的内容必须是字符串类型)。template 3360 ' div { { content } }/div ' })让VM=newvue ({el:' # root '，})组件接收的内容的属性必须是字符串类型。如果我需要的参数类型是字符串或者数组，怎么写？

Props: {content: [string，number]}，内容的类型，可以用数组表示。

内容实际上有更复杂的用途：

prop s : { content : { type : string，required:true，//必须传递default3360' defaultvalue '，//将默认显示，如果不需要，将显示validator(value){//检查内容长度。如果长度大于5，将正常显示；如果长度小于5，将报告错误：return (value.length 5)} }}不是道具

说到非道具功能，必须对应道具功能。

道具特性：当你的父组件使用子组件时，通过属性传递值给子组件时，恰好子组件声明收到父组件传递的属性，也就是说，父子组件有对应关系。如果你写这个，我们称之为道具功能。

道具的特点如下：

我们在子组件中有一个内容交付，这个属性的内容交付不会显示在dom标签上。当父组件传递内容，子组件接收内容时，可以通过插值表达式或模板中的this.content直接获取内容中的内容。

非道具特性：父组件传递了一个属性给子组件，但是子组件没有道具的内容，也就是说子组件没有声明我要接收父组件传递的内容

非道具功能：

非道具功能在子组件中，所以不能获取父组件传递的内容，因为根本没有声明想要获取的内容，所以不能使用。如果我们使用非道具功能，那么这个功能将显示在dom标签上

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。