组件（Component）
组件是VUE最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。
组件化开发就是把一个完整的页面分割成一个一个的小组件。
组件化开发可以使代码更容易维护，得到更好的复用效果。
Vue组件分为全局组件和局部组件：
全局组件：在所有的vue实例中都可以使用
局部组件：只有在当前的vue实例中可以使用
全局组件
Vue.component(tagName, options)
//注册一个全局组件
Vue.component("hello", {
//注意模板中只能有一个根元素
//template:''; 这是不可以的
template:'hello component
';
})
全局组件可以在所有实例中使用
局部组件
局部组件卸载vue实例的内部，通过components属性来定义局部组件
components:{
"hello":{
template:`hello
`
}
}
组件是特殊的vue实例
可以把组件看成一个vue的实例，因此，在vue实例中能配置的属性（data, method, watch等）在组件中依旧能够配置。
组件中的data属性必须是一个函数，返回值才是data的数据
Vue.component("my-cp",{
template:`
`,
data(){
return {
msg: 'click me'
}
},
methods:{
fn(){console.log('------->fn')}
}
})
组件是一个独立封闭的个体，组件之间的数据相互独立，不能互相使用
组件间通讯
如上所述，组件是一个单独的个体，各自的数据无法互相使用，但在工作中，多个组件之间的数据是需要互通的。
组件之间的通讯按照结构分为：
1.父传子
2.子传父
3.非父子
组件通讯-父传子
1.定义father
Vue.component("father", {
template:`
2.定义son
Vue.component("son", {
template:`
superman
`
})
3.通讯
父组件模板中：
template:`
//培养超能力
//:power是注册的属性
//"power"是父组件中的数据
//把数据在这里传给子组件
子组件模板中：
template: `
从father继承了{{power}}
`,
//子组件使用props属性接受父组件传来的数据，然后在template中使用
props:['power']
组件通讯-子传父
思路方面，逻辑是在父类的方法中实现，只是实现逻辑的参数是由子组件传递过来的。
let vm = new Vue({
el:"#dog",
methods:{
//父组件中定义了处理事件的方法，id是子组件传来的参数
delinlist(id){
...
}
}
})
接下来考虑的是子组件如何传递参数了
Vue.component('btable', {
template:`
...
//在子组件的模板中绑定click事件，指向组件自己的del(id)方法
...
`,
method:{
del(id){
//使用$emit发出当前实例的事件
this.$emit('del-event', id)
}
}
})
在使用中如下
//这里注意，@del-event绑定的是子组件发出的事件，"delinlist"是父组件中处理数据的方法
组件通讯-非父子
思路：使用一个空的实例md，接受数据的A模板设置方法到md上，再由发送数据的B模板去触发
空模板：
const md = new Vue()
A模板(在md上挂载getmsg方法)
Vue.component('batman', {
template: `蝙蝠侠收到消息:{{msg}}`,
created() {
md.$on('getmsg', msg => {
this.msg = msg
})
},
data() {
return {
msg: this.msg
}
}
})
B模板(点击按钮后触发md上已经挂载的getmsg方法)
Vue.component('flash', {
template: ``,
data() {
return {
msg: 'find us'
}
},
methods: {
run() {
md.$emit('getmsg', this.msg)
}
}
})
Vue
var vm = new Vue({
el: "#dog",
})
使用