本文参考脚本之家,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属性出来,而且会出现报错现象)