vue父组件向子组件传值的方法_接收数据校验

上一篇文章给大家说了一下子向父传值发方法，下面给大家讲解一下vue中父向子传值的方式，子组件主要是通过props的方式进行接收父组件传过来的值。

模板代码

<div id="app">
     <cpn :cmessage="message" :cmoves="moves" ></cpn>
</div>
<template id="cpn">
   <div>
       <h2 v-for = 'item in cmoves'>{{item}}</h2>
       <div >{{cmessage}}</div>
   </div>
</template>

js代码

const cpn = {
            template: '#cpn',
            // props:['cmoves','cmessage'],
            props:{
                //传入对象
                //类型限制
                // Array,String
                // message:Array

                //第二种写法 校验数据
                cmessage:{
                    type:String,//类型
                    defulet:'我是子集通信',//默认值
                    required:true  //时候必须传值 
                },
                cmoves:{
                    type:Array,//类型
                    defulet:[],//默认值
                    required:true  //时候必须传值 
                }
            },
            data(){
                return {}
            }
        }
        const app = new Vue({
            el: "#app",
            data: {
                message:'你好啊',
                moves:['海贼王','速度与激情','战狼','包青天']
            },
            // 注册组件
            components: {
                cpn
            }
        })

数据的校验

props:{
                //传入对象
                //类型限制
                // Array,String
                // message:Array

                //校验数据
                cmessage:{
                    type:String,//类型
                    defulet:'我是子集通信',//默认值
                    required:true  //时候必须传值 
                },
                cmoves:{
                    type:Array,//类型
                    defulet:[],//默认值
                    required:true  //是否必须传值 
                }
            },

以上就是父向子传值的基本方法，不足之处还望大家批评指正，前端道路上我们一起进步。