一、创建组件和使用组件
1、全局创建
Vue.component('testCom',{
template:'<div>我是一个测试组件</div>'
});
2、 局部创建
第一步: 先创建一个单文件组件
例如：testcom.vue
<template>
<div>我是一个测试组件111122222</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
第二步：在需要的文件中引入刚才的testcom.vue，并注册
引入：
import testCom from '@/pages/home/testcom'
注册：
export default {
....,
components:{
testCom
},
....
}
第三步：在template中使用组件，例如：
<template>
<div class="home">
<test-com></test-com>
</div>
</div>
</template>
二、 组件通讯（三种方式）
第一种 父->子
主要通过props实现父传子
具体实现：
1.先有两个组件，父：A.vue, 子：B.vue，并将b.vue引入A.vue并注册
2.在A.vue组件template中使用B.vue工给B.vue绑定传递的属性
例如：
<test-com :sub="title"></test-com>
其中sub表示要传递给子组件的属性，并且sub前要加冒号(:)
3.在B.vue中通过props接收sub属性
export default {
props:['sub'],
.....
}
第二种 子->父
通过$emit来传递
格式： this.$emit('要派发的自定义事件',要传递的数据);
步骤：
首先：在子组件绑定一个事件，触发一个方法，在方法内部派发一个派发自定义事件，例如：
html部分：
<button @click="say">向父组件发送数据</button>
js部分：
methods:{
say() {
this.$emit('goup',this.num);
}
}
其次：在父组件使用的子组件中@监听自定义事件，例如：
html部分：
<test-com :sub="title" @goup="getdata"></test-com>
js部分：
getdata(res) {
// console.log(res);
this.msg=res;
}
}
第三种 兄弟->兄弟(即非父子)
1、global Bus:主要利用创建一个空vue做为桥梁，实现兄弟之间通讯
第一步：创建两个A,B兄弟组件和一个bus.js
bus.js文件：
```
import Vue from 'vue'
//创建空的vue
var bus = new Vue()
```
第二步：分别在A,B两个兄弟组件中引入bus.js
import bus from '@/components/common/bus'
第三步：在A组件触发一个事件，在事件方法中派发睚定义事件，并发送传递给B组件的数据,例如A->B
A组件代码中：
html部分：
<button @click="go">将发送给B组件</button>
js部分:
export default {
data() {
return {
info:'500万'
}
},
methods:{
go() {
bus.$emit('tob',this.info);
}
}
}
B组件代码中：在B组件中的生命周期中接收A组件发过来的数据
created() {
bus.$on('tob',(res)=>{
this.msg=res;
})
}
