1、组件模板的分离：
<template id="cpn">
<view>
<text>hello</text>
<p>world</p>
</view>
</template>
Vue.component('cpn', {
template:'#cpn'
})
2、父子组件的通信：
视频链接：https://www.bilibili.com/video/av59594689?p=58
（1）父组件向子组件传递数据(props)：
首先给子组件添加props属性，然后在调用组件时绑定上对应的数据
子组件中：
//组件模板分离定义
<template id="cpn">
<div>
<p>{{cmovies}}</p>
<p>{{cmessage}}</p>
</div>
</template>
const cpn = {
template: '#cpn',
props:{
cmovies: {//直接给一个对象，可以设置类型和默认值等其他属性
type: Array,
default(){ //如果默认值是一个数组或者对象，那么就需要用函数的方式返回
return ['aksd','ajksdhf']
}
}，
cmessage: {
type: String,
default: 'ajkdhjadj',
required: true //是否必须从父组件传值
},
},
data() {
return {}
},
}
父组件中：
//调用组件
<cpn :cmovies="movies"></cpn>
var app = new Vue({
el: '#app',
data: {
movies: ['海王', '海贼王', '海尔兄弟'],
cmessage:"hello"
},
components: {
cpn,
}
})
（2）子组件向父组件传递($emit事件)：
子组件中：
methods:{
btnClick(item){
this.$emit('itemClick', item);
}
}
父组件中：
<cpn @itemClick="btn"></cpn>
methods:{
btn(item){
console.log(item);
}
}
