Vue自学：props属性的小驼峰写法为什么不被支持

程序员文章站 2022-03-06 12:24:50
...

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <title>Vue自学：props属性的小驼峰写法为什么不被支持</title>
</head>
<body>
    <div id="app">
        {{message}}
        <!-- 当props里面的属性名称使用了小驼峰标识的时候，v-bind:中的属性要在驼峰标识的大写字母前使用-，并且全部小写 -->
        <!-- 否则HTML标签不支持小驼峰标识，会导致内容无法展示 -->
        <!-- 正确使用:v-bind:c-info:"info" -->
        <!-- 这里的属性值为该数组或对象的名称 -->
        <cpn v-bind:c-info="info"></cpn>
    </div>
</body>
<template id="cpn">
    <div>
        <!-- 传递过来的值也养要个props里面的值一样，要大写 -->
        <h3>{{cInfo}}</h3>
    </div>
</template>
<script type="text/javascript">
    //定义一个局部组件的常量
    const cpn = {
        // 绑定的是template标签中的id值
        template:'#cpn',
        data(){

        },
        props:{
            //当组件的传递值为小驼峰标识时
            //1、要么属性的全部都要对应大写
            //2、要么绑定属性的该大写字母前面要加-
            // cInfo是另外取的属性名称
            cInfo:{
                type:Object,
                default(){
                    return []
                }
            }
        }
    }

    const app = new Vue({
        el:'#app',
        data:{
            message:'tesh this message',
            info:{
                name:'梁凯达',
                age:'27',
                height:'178cm',
            }
        },
        methods:{

        },
        computed:{

        },
        components:{
            cpn,
        }
    })
</script>
</html>
上一篇： css怎样设置table的宽度为自适应宽度
下一篇： Vue自学：组件子传父操作