一翻伺、創(chuàng)建組件和使用組件
1材泄、全局創(chuàng)建
Vue.component('testCom',{
template:'<div>我是一個測試組件</div>'
});
2、 局部創(chuàng)建
第一步: 先創(chuàng)建一個單文件組件
例如：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實現(xiàn)父傳子
具體實現(xiàn)：
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('要派發(fā)的自定義事件',要傳遞的數(shù)據(jù));
步驟：
首先：在子組件綁定一個事件急灭，觸發(fā)一個方法姐浮，在方法內(nèi)部派發(fā)一個派發(fā)自定義事件，例如：
html部分：
<button @click="say">向父組件發(fā)送數(shù)據(jù)</button>
js部分：
methods:{
say() {
this.$emit('goup',this.num);
}
}
其次：在父組件使用的子組件中@監(jiān)聽自定義事件葬馋，例如：
html部分：
<test-com :sub="title" @goup="getdata"></test-com>
js部分：
getdata(res) {
// console.log(res);
this.msg=res;
}
}
第三種 兄弟->兄弟(即非父子)
1卖鲤、global Bus:主要利用創(chuàng)建一個空vue做為橋梁，實現(xiàn)兄弟之間通訊
第一步：創(chuàng)建兩個A,B兄弟組件和一個bus.js
bus.js文件：
```
import Vue from 'vue'
//創(chuàng)建空的vue
var bus = new Vue()
```
第二步：分別在A,B兩個兄弟組件中引入bus.js
import bus from '@/components/common/bus'
第三步：在A組件觸發(fā)一個事件畴嘶，在事件方法中派發(fā)睚定義事件蛋逾，并發(fā)送傳遞給B組件的數(shù)據(jù),例如A->B
A組件代碼中：
html部分：
<button @click="go">將發(fā)送給B組件</button>
js部分:
export default {
data() {
return {
info:'500萬'
}
},
methods:{
go() {
bus.$emit('tob',this.info);
}
}
}
B組件代碼中：在B組件中的生命周期中接收A組件發(fā)過來的數(shù)據(jù)
created() {
bus.$on('tob',(res)=>{
this.msg=res;
})
}
