Vue学习笔记-组件通信-父传子（props中的驼峰标识）

在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

 <div id="app">
     <!--<cnp :cinfo="info" :childMyMessage ="message"></cnp>-->
     <!--在传值的时候不支持驼峰写法childMyMessage 要写成下面这种child-my-message-->
     <cnp :cinfo="info" :child-my-message ="message"></cnp>
 </div>

 <template id="cnp">
     <!--VUE组件必须要有一个根元素包裹其他的标签元素-->
     <div>
         <h2>{{cinfo}}</h2>
         <h2>{{childMyMessage}}</h2>
     </div>
 </template>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
     const cnp = {
         template: '#cnp',
         props: { //props单向数据流，父组件传递到子组件的值不允许直接改变
             cinfo: {
                 type: object,
                 default(){ //默认值
                     return{}
                 }
             },
             childMyMessage: {
                 type: string,
                 default: ''
             }
         }
     }
     const app = new Vue ({
         el: '#app',
         data: {
             info: {
                 name: 'why',
                 age: 18,
                 height: 1.88
             },
             message: 'aaaaa'
         },
         components: {
             cnp
         }
     })
 </script>

除了数组之外，我们也可以使用对象，当需要对props进行类型等验证时，就需要对象写法了。
验证都支持哪些数据类型呢？
String
Number
Boolean
Array
Object
Date
Function
Symbol
当我们有自定义构造函数时，验证也支持自定义的类型