Vue父子組件數據傳輸（父—>子）：
1、創建子組件構造器
2、對子組件構造器進行注冊
3、采用props方式對子組件實現數據傳輸
4、使用子組件，在子組件使用中采用v-bind綁定父組件數據，最終實現父組件向子組件傳輸數據
5、駝峰標識 ：props命名中存在駝峰，在綁定vue的div中，實現關聯處，大些字母M 在此變成 -m
6、自定義template中，如果多個html元素，需要設置一個根html元素，一般為div
<body>
<div id = "app">
<!-- cnp中將父組件向子組件中傳輸 -->
<!--駝峰標識：大些字母M 在此變成 -m-->
<mycpn :cinfo="infos" :c-communtiy="cominfo"></mucpn>
</div>
<!-- template 編寫自己的模版 -->
<template id = "mytemp">
<!--template中有多個html元素時，必須設置一個根html，此處為div -->
<div>
<h4> 這是魔戒系列電影</h4>
<p v-for = "m in cmovies">{{m}}</p>
<h4>{{cmessage}}</h4>
<h4>工作社區：{{cCommuntiy}}</h3>
</div>
</template>
<script>
//創建子組件 #mytemp 創建組件構造器對象
//原始為Vue.extend(template:模版具體內容（如div等）)
//Vue.component("組件標簽名",自定義的組件構造器) 此注冊為全局變量
//以下為語法糖寫法
const cnp = {
template:"#mytemp",
// 基礎寫法props: ["cmovies","cmessage"]
//標注數據格式 常用格式包括Array String Number Boolean Object Date Function
//props: {
// cmovies:Array,
// cmessage:String,
// }
props: {
cmovies:{
type:Array,
//default:[] 下面寫法采用了工廠函數的形式，有的vue版本要求
default(){
return [];
},
requried:true
},
cmessage:{
type:String,
default:"初始化"
}
}
}
//創建父組件
const app = new Vue({
el:"#app",
//data 嚴格按照函數格式編寫，是函數格式，則外部調用該data是新建一個對象
//多次調用該data，是建立不同對象，可以說相互之間解偶
data () {
return {
movies:["魔戒現身","雙塔奇兵","王者歸來"],
message:"以上為魔戒系列電影。"
}
},
//組件注冊的語法糖
components: {
cnp
}
})
</script>
</body>