一個很基礎的父組件向子組件傳值：
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<div id="app">
<chil :parentMsg="msg"></chil>
</div>
<template id="chil">
<div>
<h4>I'm child element! {{ parentMsg }} </h4>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var chil = {
template:'#chil',
props:['parentMsg'],
data(){
return {}
},
methods: {},
}
var Vm = new Vue({
el:'#app',
data(){
return {
msg:'P,I have a pen,I have an apple.Ang,ApplePen!'
}
},
methods: {},
components:{
chil
}
})
</script>
</html>
此時頁面渲染出：I'm child element!
但是通過v-bind綁定的parentMsg，子組件卻沒有接收到，出現的原因是：駝峯寫法！
Html中是不區分大小寫的，所以v-bind下的parentMsg===parentmsg，而js內的props中是區分大小寫的，這樣子組件中，本應該接收的應該是parentmsg，所以接收不到父組件所傳的值，均改爲小寫模式，就可以解決這個問題。
巴拉巴拉：