父子組件的通信，父組件向子組件傳遞數(shù)據(jù)，子組件拿到數(shù)據(jù)后應(yīng)用，通過(guò)props函數(shù)實(shí)現(xiàn)（在子組件中操作）

第一步：明確模板內(nèi)容

<template id="son">
?<div>
? ?<h2>{{submessage}}</h2>
? ?<ul>
? ? ?<li v-for="item in submovies">{{item}}</li>
? ?</ul>
?</div>
</template>

第二步：確立父子關(guān)系

const app=new Vue({
? ?el:document.querySelector('#app'),
? ?data:{
? ? ? ?message:'hello world',
? ? ? ?movies:['海賊','火影'],
? ? ? ?counter:0
? ?},
? ?methods:{

? ?},
? ?components:{
? ? ?cpn:{
? ? ?template:'#son',
? ? ?props:['submessage','submovies']
? ? ?}
? ?}
})

第三步：在父組件里引用子標(biāo)簽，并定義變量動(dòng)態(tài)綁定到父組件中指定變量。

如果沒(méi)有使用v-bind，則按字符串處理

<div id="app">
<cpn :submessage="message" :submovies="movies"></cpn>
</div>

第四步：誒，沒(méi)有了！但可以拓展一些

像是props可以有多種寫法，第一種如上，第二種嘛如下：

它可以指定類型

props:{

submessage:String,
submovies:Array

}

至于第三種可以干的事就更多了！如下：

props:{
?submessage:{
? ?type:String,
? ?default:'兒子',
? ?required:true
?},
?submovies:{
? ?type:Array,
? ?default() {
? ? ?return [] //如果默認(rèn)值為對(duì)象或者數(shù)組的時(shí)候必須使用工廠函數(shù)返回
? ?},
? ?required:true? //要求必須傳入一個(gè)變量值
?}
}