4-3 组件参数校验与非props特性

本文参考脚本之家，https://www.jb51.net/article/143466.htm

通过属性的形式，父组件对子组件进行参数的传递　　//如下图：

//父组件设置content属性，向属性中传值（第12行代码）。子组件用props方法接收传递过来的content属性（第16行代码）

组件参数校验：父组件向子组件传递的内容，子组件有权对这个内容进行约束，这些参数可以称之为参数校验

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

//如下，对第一个例子的代码进行了修改,我们把子组件中的props属性,改为一种对象的形式,而且我们也约束了父组件传递过来的content为String类型（第16-17行代码）

//页面显示效果依然不变。

==================================================

//当改变了父组件中content的值等于1，那么我们就很自然的把content理解为数字类型。其实不然，因为下面content所表示的是String类型，所以‘1’会被当成字符串来表示。

==================================================

//在vue中，默认传递的值都是字符串，如果你想要传递一个数字,那么必须在content前面添加一个引号（：）来表示：

//但是，当添加了引号（：）后，页面出现报错现象：　　　　（即类型检测有问题！！！）

//原因是我们的content类型选择的是String类型，只要把String改为Number就好了。如下：　　　　这样页面就不会出现报错了

==================================================

//当然了,content也是可以接受一个数组的,用来判断它父组件为子组件传递的多个参数。

//如下图：把content属性修改为Number和String类型后，这样，不管content传递的值是数字还是字符串，页面都不会出现报错

==================================================

//除了数组形式,我们也可以写成对象的形式。那么对象的形式,vue为我们提供了各种可选的参数。

==================================================

props特性：

①父组件传值，子组件接收，然后在组件中可以直接使用父组件传递过来的数据(如上图，第12，29行代码)

②同时不会把属性（例如：content=‘hello world’）显示在DOM的标签之中

非props特性：

①父组件传值，子组件不接收，那么在子组件中就没办法使用父组件传递过来的数据

②同时，非props特性对应的属性值其实会显示在子组件的最外层标签的html属性之中　　【实际中，非props使用的场景并不是特别多，了解即可】

如图：　　

//代码如下：　　　　　　（把props给注释了，就是非props特性了）

//显示的就是非props特性的结果　　　　　　　　（content中的内容不会显示出来，而且html代码中div标签有显示content属性出来，而且会出现报错现象）