组件：
类似于 模块化 概念
一、组件定义
1）局部组件
只能在自己的Vue对象范围内使用。
new Vue({
el:
data:
...
components:{
'组件名':{
template:'html标签' —— 组件使用的模板
},
'组件名2':{
template:'html标签' —— 组件使用的模板
}
}
})
*注意事件： 组件名不能有大写字母 —— vue 2.2.4
2）全局组件
在哪里（Vue认识的范围）都可以使用的组件。
Vue.component('组件名',{
//选项
template:'html标签'
});
二、组件的内部信息（选项）——细化选项：
1、template —— 渲染组件的模板
2、数据 —— 函数形式，函数有返回值，返回json，json里面就是这个组件的数据data(){return {msg:'',a:12,arr:[].....}}
3、方法 methods:{show(){},show2(){}}三、模板提取
1）template 标签
2）script 标签 —— 官方推荐
...
组件间的通信：
1、父子间——子组件使用父组件的数据
2、父子间——父组件使用子组件的数据
3、组件间——A组件和B组件之间的数据交换
一、子组件使用父组件的数据
1、在父组件里，通过自定义属性的方式，把数据传到子组件<子组件 :属性名='父级数据'>2、在子组件里接收1)Vue.compoent('',{props:['属性名']});
2)Vue.componet('',{props:{'属性名':String / Number}//* 如果参数是数字，但是指定的是String,这时会有警告，但不影响程序结果})
3、在子组件里使用：
{{属性名}}
父组件使用子组件的数据
1、子级主动发送数据
this.$emit('事件名',要发送的数据); —— 可以理解为子级新建了一个事件并且把它公布出去了，父级就可以使用这个事件了
this.$emit('child-say',msg);
2、父级通过事件的方式来取数据
@事件名=“父级方法名”
@child-say="receive"
-------
receive(d){
alert(d); //这里的d就是子级的数据
组件通信：1、子取父，父取子子取父：父：{
//res -> a的数据
});
这种方式的缺点： 不同的组件，发出的事件名不能重。
3、单一集中数据管理
定义一个公用的对象，大家用的数据都在这个对象里，任何组件可以直接使用，可以更改——利用了 引用 的特性。
const DATA = {
msg:'明天接着唱',
name:'蔡哲浩',
count:2
};
1.定义组件
全局
局部
2.组件通信
1）父子间
父->子:自定义属性，props
子->父:this.$emit('say',msg) , @say="show"
2）单一事件管理
let ev = new Vue();
发：ev.$emit('say',msg);
收：ev.$on('say',r=>{
r
});
3）单一集中数据管理
const DATA = {
msg1:..
msg2:..
}
