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

程序员文章站 2022-06-06 20:23:55

...

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

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

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

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

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

以下是实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <!--4.将a的值传递给子组件son (ga是根组件的属性a)-->
    <son :a="ga"></son>
</div>

<!-- 3.子组件son -->
<template id="son">
    <div>我是子组件，父组件传递的数据是a:{{a}},我自己的变量b:{{b}}</div>
</template>

<script>
    //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,
        }
    })

</script>
</body>
</html>

运行结果如下：

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