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属性出来,而且会出现报错现象)

猜你喜欢

转载自www.cnblogs.com/ytraister/p/10611166.html
4-3