vue props 案列详解

通过 Prop 向子组件传递数据

为了说明此案列此处使用了三个经典的案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <style>
        #app{
            margin: 1em;
            font-size: 1.2em;
        }
        .component div{
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component :parent-msg="msg"></my-component>
</div>
<script type="text/x-template" id="my-component">
<div class="component">
    <div> ParentMsg:{{parentMsg}}</div>
    <div> childMsg:{{msg}}</div>
</div>
</script>
<script>
    //register
    Vue.component('my-component',{
        props:['parentMsg'],
        template:'#my-component',
        data:function () {
            return {
                msg:'Msg of Child!'
            }
        }
    });
    // a root instarnce
    new Vue({
        el:'#app',
        data:{
            msg:'Msg of Parent!'
        }
    });
</script>
</body>
</html>

案列1 如上

效果如下

ParentMsg:Msg of Parent!
childMsg:Msg of Child!

{{parentMsg}} 在data中尚未定义但是在<my-component :parent-msg="msg"></my-component> 可以看到他是使用父类的msg

所以才能拿到父类的数据

还有一点要注意 props里面写的是parentMsg 而对应着html中的parent-msg

案列2 和案例1，就一出不一样

这个地方改成了

<div id="app">
    <my-component :parent-msg="msg"></my-component>
</div>

<div id="app">
    <my-component parent-msg="msg"></my-component>
</div>

打印效果就变成了

ParentMsg:msg
ChildMsg:Msg of child

案例3 主要是数据类型验证详解都写注释里了

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <title>Prop-Validation</title>
    <style>
        #app {
            margin: 1em;
            font-size: 1.2em;
        }

        .component div {
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component :prop-a="msg"></my-component>
</div>
<script type="text/x-template" id="my-component">
    <div class="component">
        {{propD}}
    </div>
</script>

<script>
    //register
    // register

    Vue.component('my-component',{
        props:{
            parentMsg:null,//null 代表不检查性别
            propA:Number,//限定数字
            propB:[String,Number],//多重条件可用[] 隔开
            propC:{
                //必要，且限定字符串类型
                type:String,
                //相当于表单中的
                // required:ture
            },
            propD:{
                //数字类型 而且有预设值
                type:Number,
                default:100
            },
            propE:{
                //Object类型 代表可接受的是个对象或者数组
                type:Object,
                default:function () {
                    return {
                        message:'hello'
                    }
                }
            },
            propF:{
                //自定条件检验
                validator:function (value) {
                    return value>110
                }
            }
        },




        template:'#my-component',

        data:function () {
            return{
                msg:"Msg of Child"
            }
        }
    });
    //create a root instance
    new Vue({
        el:'#app',
        data:{
            msg:123
        }
    });
</script>
</body>
</html>

就是验证类型的下面分享一种错误写法，a对应a 这样子才是正确的

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <title>Prop-Validation</title>
    <style>
        #app {
            margin: 1em;
            font-size: 1.2em;
        }

        .component div {
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component :prop-a="msg"></my-component>
    <my-component :prop-b="msg"></my-component>
    <my-component :prop-c="msg"></my-component>
    <my-component :prop-d="msg"></my-component>
    <my-component :prop-e="msg"></my-component>
    <my-component :prop-f="msg"></my-component>
    <my-component :parent-msg="msg"></my-component>
</div>
<script type="text/x-template" id="my-component">
    <div class="component">
        <hr>
        <p> a:{{propA}}</p>
        <p> b:{{propB}}</p>
        <p> c:{{propC}}</p>
        <p> d:{{propD}}</p>
        <p> e:{{propE}}</p>
        <p> f:{{propF}}</p>
        <p> parentMsg:{{parentMsg}}</p>

    </div>
</script>

<script>
    //register
    // register

    Vue.component('my-component',{
        props:{
            parentMsg:null,//null 代表不检查性别
            propA:Number,//限定数字
            propB:[String,Number],//多重条件可用[] 隔开
            propC:{
                //必要，且限定字符串类型
                type:String,
                //相当于表单中的
                required:true
            },
            propD:{
                //数字类型 而且有预设值
                type:Number,
                default:100
            },
            propE:{
                //Object类型 代表可接受的是个对象或者数组
                type:Object,
                default:function () {
                    return {
                        message:'hello'
                    }
                }
            },
            propF:{
                //自定条件检验
                validator:function (value) {
                    return value<110
                }
            }
        },




        template:'#my-component',

        data:function () {
            return{
                msg:"Msg of Child"
            }
        }
    });
    //create a root instance
    new Vue({
        el:'#app',
        data:{
            msg:123
        }
    });
</script>
</body>
</html>

通过 Prop 向子组件传递数据

猜你喜欢