最近在用vue做項目敦迄，學(xué)習(xí)了不少東西钠怯，但是有時候光顧著做項目卻忘記要找個時間來整理一下最近的一些學(xué)習(xí)新得佳魔，因為是新手，所以可能會有錯誤的地方呻疹，歡迎指出和交流呀~~~
關(guān)于父子組件以及非父子組件之間的數(shù)據(jù)通信
1 父子組件之間數(shù)據(jù)通信
一般父組件向子組件傳遞數(shù)據(jù)用prop進行傳遞吃引，注意，子組件不能對prop中的數(shù)據(jù)進行更改刽锤，vue中規(guī)定是防止子組件對父組件中的數(shù)據(jù)進行竄改镊尺。而子組件向父組件進行數(shù)據(jù)傳遞則可以通過事件觸發(fā)父組件的事件來實現(xiàn)數(shù)據(jù)的傳遞。（是不是有點懵逼了并思，看個例子吧 ）
（這里我就直接摘取一段項目中的例子代碼來說明）
使用prop進行數(shù)據(jù)傳遞：
//這是父組件中的部分代碼庐氮，父組件向子組件<handle-Employee><handle-Employee>傳遞數(shù)據(jù)（method,dialogFormvisible）
// 父組件的部分代碼
<!--添加員工模塊-->
<div class="add">
<el-button type="primary" icon="edit" @click="handleAdd">新增員工</el-button>
<handle-Employee :method="method"
:dialogFormVisible="dialogFormVisible" @close="closeDialog" @getEmployee="getEmployee"></handle-Employee>
</div>
</div>
// 父組件的script代碼
export default {
data () {
return {
method:{handle： ’add‘, title: '增加員工'}
dialogFormvisible: false
}
}
}
// 子組件中則需要加prop屬性數(shù)據(jù) ，如下所示：
export default {
props: [ 'method', 'dialogFormVisible']
}
//所以只要父組件中的數(shù)據(jù)變化修改宋彼，子組件中的數(shù)據(jù)也會跟這修改弄砍；
在chrome中用vue-devtool其實也可以看到相關(guān)的數(shù)據(jù)屬性；
當(dāng)然输涕，子組件做完相關(guān)操作之后音婶，需要時間的是將屬性值dialogFormVisible重新修改為false。若是直接在子組件進行修改的話莱坎，就會報錯衣式，因為會影響到父組件的數(shù)據(jù)，vue中規(guī)定不能直接對prop的屬性值進行修改檐什。那么就可以用事件觸發(fā)來實現(xiàn)子組件向父組件傳遞數(shù)據(jù)了碴卧。
///父組件監(jiān)聽子組件的事件，通過@close="closeDialog"和@getEmployee="getEmployee"來實現(xiàn)監(jiān)聽乃正；
一旦子組件中的事件close和getEmployee發(fā)生之后住册，就會觸發(fā)父組件中的事件closeDialog和getEmployee事件。
// 父組件的部分代碼
<div class="add">
<el-button type="primary" icon="edit" @click="handleAdd">新增員工</el-button>
<handle-Employee :method="method" :dialogFormVisible="dialogFormVisible" @close="closeDialog" ></handle-Employee>
</div>
//子組件中的事件分發(fā)
export default {
methods: {
// 關(guān)閉彈出框
closeDialog () {
this.$emit('close', false) //這里就是直接觸發(fā)子組件的close事件瓮具，一旦這個執(zhí)行荧飞，父組件中的對應(yīng)方法就會執(zhí)行。
}
}
}
// 當(dāng)那邊觸發(fā)關(guān)閉事件的時候搭综，這邊的顯示值就要關(guān)閉垢箕，那邊會傳過來一個false
// 父組件的事件
export default {
methods: {
// 當(dāng)那邊觸發(fā)關(guān)閉事件的時候，這邊的顯示值就要關(guān)閉兑巾，那邊會傳過來一個false
closeDialog (val) {
this.dialogFormVisible = val
}
}
}
這樣就實現(xiàn)了父子組件之間的數(shù)據(jù)傳遞条获；
2 實現(xiàn)非父子組件之間的數(shù)據(jù)傳遞
通過建立中間的事件bus總線。實現(xiàn)非父子組件之間的數(shù)據(jù)通信蒋歌。
- 首先建立事件bus帅掘，我會新建一個bus.js文件委煤；注冊bus。
- 分別在組件中使用emit和on實現(xiàn)數(shù)據(jù)之間的通信修档；
1 bus.js文件
//bus.js碧绞，注冊Bus
import Vue from 'vue'
export default new Vue()
2 組件emit觸發(fā)事件
<template>
<div class="add-task" :class="{'ishide':isAdding}" @click="addtask()">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
添加任務(wù)
</div>
</template>
<script>
import Bus from '@/bus'
export default {
methods: {
props: ['index'],
data () {
return {
isAdding: false
}
},
addtask () {
this.isAdding = true
Bus.$emit('adding-task', this.isAdding, this.index) // 這里觸發(fā)的事件是'adding-task'，
傳遞了兩個參數(shù)吱窝，分別是this.isAdding和this.index
this.$emit('addtask')
}
}
}
3 另外一個組件on接收事件
// 模板中的代碼就不展示了讥邻。
主要展示的是script中的代碼
export default{
data() // 這里的數(shù)據(jù)也不一一顯示啦；
created () {
// 這里使用on監(jiān)聽了adding-task事件院峡，接收到兩個參數(shù)兴使。所以一旦上面的組件中的adding-task事件觸發(fā)，這里就會監(jiān)聽到照激。
Bus.$on('adding-task', (state, index) => {
if (this.index === index) {
this.isShow = state
}
})
}
}
缺點：
有時候小的子組件在頁面中有很多個发魄，需要復(fù)用，那么為了防止每一次觸發(fā)相應(yīng)的事件的時候俩垃，都會影響到監(jiān)聽的對應(yīng)組件励幼，如下圖所示。我的解決方案就是給每一個循環(huán)的子組件賦值一個index的值口柳；
//這里我會在每一次組件emit的時候傳遞一個index的值苹粟，另外一個組件on之后接受參數(shù)，會先判斷該index是不是與自己的index相等，如果相等才執(zhí)行相應(yīng)的數(shù)據(jù)改變操作。
Bus.$on('adding-task', (state, index) => {
if (this.index === index) {
this.isShow = state
}
今天先到這里烟阐，困了墓卦。還有更復(fù)雜的數(shù)據(jù)通信是用vuex，不過我現(xiàn)在的項目應(yīng)該是暫時還不會用到睛榄，所以以后用到再去深入了解荣茫。
