在父组件里使用子组件时，父组件的模板最外层一定要有div块
组件的数据存放问题
组件内部是无法访问vm实例里的data数据的，组件有自己的保存数据的位置。
组件也有data、methods、生命周期函数等属性，但data必须是一个函数且返回的是一个对象，对象内部保存着数据。
为什么组件里的data必须是函数形式？
当重复使用组件时，如：
<div>
<cpn><cpn>
<cpn><cpn>
<cpn><cpn>
</div>
这三个cpn相当于三个组件实例，都会调用组件里的data，如果data是对象，那么三个实例传进的是地址，相当于三个实例引用同一个data。
如果data是函数，那么cpn在调用data时，会执行函数返回新的对象，以防止改变一个实例其他跟着改变。
父子组件通信
父传子用props
在子组件中添加props属性，里面存放来自父组件的数据。
props里命名慎用驼峰标识，如cMessage动态绑定时需改为v-bind:c-message=""
<cpn :cmovies="movies" :cmessage="message"></cpn>
Vue.component('cpn',{
template:'#cpnC',
props:['cmovies','cmessage'],
或props:{
//对象类型可添加类型和默认值
cmovies:Array,
cmessage:{
type:String,
default:'你好啊',
required:true //用cpn时必须传入的值
}
}
})
子传父用自定义事件
在子组件的方法中用emit触发在父组件标签里的自定义事件（这个事件是父组件里自定义的事件）
父组件自定义事件响应的函数传参问题很奇怪：
- 可以使用faclick($event,userDefined)，这样在定义faclick时的形参就可以列出多个，faclick(a,userDefined){}，这个方法只适用于emit只传递一个参数。
- 可以使用faclick(arguments,userDefined)，这样定义faclick时的形参就可以是一个数组，faclick(arr,userDefined){}，数组里依次对应emit里传入的值。userDefined是自己定义的参数而不是emit里传入的参数。适用于emit传递多个参数。
<div id="app">
<cpn @itemclick="faclick"></cpn> //itemclick即自定义事件
</div>
<template id="cpnC"> //此id避免与注册的标签名相同
<div>
<button v-for="item in movies" @click="btnclick(item)">{
{
item}}</button> //
</div>
</template>
<script>
子组件{
methods:{
btnclick(item)
this.$emit('itemclick',item) //itemclick是给父组件自定义的事件
}
}
}
父组件{
methods:{
faclick(item){
}
}
}
</script>