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

首页 > 博客列表 > Vue自学：props属性的小驼峰写法为什么不被支持

博主信息

博文 250

粉丝 3

访问量 385667

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

梁凯达的博客

原创

2334人浏览过

<!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>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

2018/3/15（文本元素）

2018-03-25 22:26:52