父子间props通信，v-bind不支持驼峰标识 

body>
    <div id="app">
        <!-- v-bid -->
        <cpn1 v-bind:cinfor="info"></cpn1>
    </div>
<template id="app1">
    <div>
        <h2>{{cinfor}}</h2>
    </div>
</template>
<script src="js/vue.js"></script>
    <script>
        var vm  = new Vue({
            el:"#app",
            data:{
                info:{
                    name:'why',
                    age:18,
                    sex:'mael'
                }
            },
            components:{
                cpn1:{
                    template:'#app1',
                    props:{
                        cinfor:{
                            type:Object,
                            data:function(){
                                return{}
                            },
                            required:true
                        }
                    },
                    data:function(){
                        return{}
                    },
                    methods:{
                    }
                }
              
            }

        })
    </script>
</body>

在上面的代码中，props中的cinfor ，template中cinfor，v-bind中的cinfor这时候不是驼峰标识，在浏览器中打印出来的结果是

 

修改成驼峰标识（i=>I）props中的cInfor ，template中cInfor，v-bind中的cInforI，在浏览器中打印出来的结果是

 

 会报错，原因是因为v-bind不支持驼峰标识，改成v-infor 就== vInfor

<body>
    <div id="app">
        <!-- v-bid -->
        <cpn1 v-bind:c-infor="info"></cpn1>
    </div>
<template id="app1">
    <div>
        <h2>{{cInfor}}</h2>
    </div>
</template>
<script src="js/vue.js"></script>
    <script>
        var vm  = new Vue({
            el:"#app",
            data:{
                info:{
                    name:'why',
                    age:18,
                    sex:'mael'
                }
            },
            components:{
                cpn1:{
                    template:'#app1',
                    props:{
                        cInfor:{
                            type:Object,
                            data:function(){
                                return{}
                            },
                            required:true
                        }
                    },
                    data:function(){
                        return{}
                    },
                    methods:{
                    }
                }
              
            }

        })
    </script>
</body>

　　

 

posted @ 2020-11-26 11:27  zeal666  阅读(206)  评论(0)    收藏  举报