这里有几种标识
- 注意：如果使用驼峰标识cInfo，则在id='app’里面进行改变 c-info，其他位置不用改变，
- 以-分割 cInfo --> c-info cMyMessage --> c-my-message
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<cpn :cinfo='info'></cpn>
</div>
<template id="cpn">
<h2>{{cinfo}}</h2>
</template>
<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// Vue.component('cpn')
const cpn={
template:'#cpn',
props:{
cinfo:{
type:Object,
default(){
return {}
}
}
}
}
const app=new Vue({
el:'#app',
data:{
info:{
name:'1',
age:2,
height:3
}
},
components:{
cpn
}
})
</script>
</body>
</html>
c-info
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<cpn :c-info='info'></cpn>
</div>
<template id="cpn">
<h2>{{cInfo}}</h2>
</template>
<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// Vue.component('cpn')
const cpn={
template:'#cpn',
props:{
cInfo:{
type:Object,
default(){
return {}
}
}
}
}
const app=new Vue({
el:'#app',
data:{
info:{
name:'1',
age:2,
height:3
}
},
components:{
cpn
}
})
</script>
</body>
</html>
