<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!