Vue从零开始总结23

父子组件的通信，父组件向子组件传递数据，子组件拿到数据后应用，通过props函数实现（在子组件中操作）

第一步：明确模板内容

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

第二步：确立父子关系

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

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

第三步：在父组件里引用子标签，并定义变量动态绑定到父组件中指定变量。

如果没有使用v-bind，则按字符串处理

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

第四步：诶，没有了！但可以拓展一些

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

它可以指定类型

props:{

submessage:String,
submovies:Array

}

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

props:{
 submessage:{
   type:String,
   default:'儿子',
   required:true
 },
 submovies:{
   type:Array,
   default() {
     return [] //如果默认值为对象或者数组的时候必须使用工厂函数返回
   },
   required:true  //要求必须传入一个变量值
 }
}