【Vue】零基础学习Vue: 第22课 Vue子组件接收父主件传递的值：

数组接收值方法：（数组表示对变量不做校验）

props:['a'] 	//a为子主件标签内传递值的名称

对象接收值方法：（对象表示对变量做校验）

props:{
	a:{ //校验变量a
        type:String,      //设置传递属性的类型
        required:true,    //true代表该属性为必传属性没有则会报错
        default:'3',     //当值还没有传过来时,给a属性设置默认值3
        validator(value){   //给值定义校验方法
            console.log('校验开始')
            return value>1  //返回false则报警告
        }
    }
},

以下是实现代码：

    
    Title
    
    




    
    




    
我是子组件，父组件传递的数据是a:{{a}},我自己的变量b:{{b}}



    //1.定义子组件son
    let son = {
        //子组件中props这个选项  专门用来存放接受父组件数据的变量
        // props这个选项可以是一个数组  数组表示对变量不做校验
        // props这个选项可以是一个对象  对象表示对变量做校验
        //5.数组 接收父组件传递过来的变量
        props:['a'],    

        //下面注释的是 对象 接收传递参数方法
        // props:{
        //     a:{ //校验变量a
        //         type:String,      //设置传递属性的类型
        //         required:true,    //true代表该属性为必传属性没有则会报错
        //         default:'3',     //当值还没有传过来时,给a属性设置默认值3
        //         validator(value){   //给值定义校验方法
        //             console.log('校验开始')
        //             return value>1  //返回false则报警告
        //         }
        //     }
        // },

        template:'#son',
        data(){ //这是子组件定义变量的方法 data选项必须是一个函数  数据存放在返回的对象中
            return {    
                b:3
            }
        },
    }

    let vm = new Vue({
        el:'#app',
        data: {
            ga: 1
        },
        //2.注册子组件
        components:{
            son,
        }
    })

运行结果如下：

我是子组件，父组件传递的数据是a:1,我自己的变量b:3