最近在用vue做項目，學習了不少東西，但是有時候光顧著做項目卻忘記要找個時間來整理一下最近的一些學習新得，因為是新手，所以可能會有錯誤的地方，歡迎指出和交流呀~~~
關于父子組件以及非父子組件之間的數據通信
1 父子組件之間數據通信
一般父組件向子組件傳遞數據用prop進行傳遞，注意，子組件不能對prop中的數據進行更改，vue中規定是防止子組件對父組件中的數據進行竄改。而子組件向父組件進行數據傳遞則可以通過事件觸發父組件的事件來實現數據的傳遞。（是不是有點懵逼了，看個例子吧 ）
（這里我就直接摘取一段項目中的例子代碼來說明）
使用prop進行數據傳遞：
//這是父組件中的部分代碼，父組件向子組件<handle-Employee><handle-Employee>傳遞數據（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屬性數據 ，如下所示：
export default {
props: [ 'method', 'dialogFormVisible']
}
//所以只要父組件中的數據變化修改，子組件中的數據也會跟這修改；
在chrome中用vue-devtool其實也可以看到相關的數據屬性；
當然，子組件做完相關操作之后，需要時間的是將屬性值dialogFormVisible重新修改為false。若是直接在子組件進行修改的話，就會報錯，因為會影響到父組件的數據，vue中規定不能直接對prop的屬性值進行修改。那么就可以用事件觸發來實現子組件向父組件傳遞數據了。
///父組件監聽子組件的事件，通過@close="closeDialog"和@getEmployee="getEmployee"來實現監聽；
一旦子組件中的事件close和getEmployee發生之后，就會觸發父組件中的事件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>
//子組件中的事件分發
export default {
methods: {
// 關閉彈出框
closeDialog () {
this.$emit('close', false) //這里就是直接觸發子組件的close事件，一旦這個執行，父組件中的對應方法就會執行。
}
}
}
// 當那邊觸發關閉事件的時候，這邊的顯示值就要關閉，那邊會傳過來一個false
// 父組件的事件
export default {
methods: {
// 當那邊觸發關閉事件的時候，這邊的顯示值就要關閉，那邊會傳過來一個false
closeDialog (val) {
this.dialogFormVisible = val
}
}
}
這樣就實現了父子組件之間的數據傳遞；
2 實現非父子組件之間的數據傳遞
通過建立中間的事件bus總線。實現非父子組件之間的數據通信。
1 bus.js文件
//bus.js，注冊Bus import Vue from 'vue' export default new Vue()
2 組件emit觸發事件
<template>
<div class="add-task" :class="{'ishide':isAdding}" @click="addtask()">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
添加任務
</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) // 這里觸發的事件是'adding-task'，
傳遞了兩個參數，分別是this.isAdding和this.index
this.$emit('addtask')
}
}
}
3 另外一個組件on接收事件
// 模板中的代碼就不展示了。
主要展示的是script中的代碼
export default{
data() // 這里的數據也不一一顯示啦；
created () {
// 這里使用on監聽了adding-task事件，接收到兩個參數。所以一旦上面的組件中的adding-task事件觸發，這里就會監聽到。
Bus.$on('adding-task', (state, index) => {
if (this.index === index) {
this.isShow = state
}
})
}
}
缺點：
有時候小的子組件在頁面中有很多個，需要復用，那么為了防止每一次觸發相應的事件的時候，都會影響到監聽的對應組件，如下圖所示。我的解決方案就是給每一個循環的子組件賦值一個index的值；
//這里我會在每一次組件emit的時候傳遞一個index的值，另外一個組件on之后接受參數，會先判斷該index是不是與自己的index相等，如果相等才執行相應的數據改變操作。
Bus.$on('adding-task', (state, index) => {
if (this.index === index) {
this.isShow = state
}
今天先到這里，困了。還有更復雜的數據通信是用vuex，不過我現在的項目應該是暫時還不會用到，所以以后用到再去深入了解。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
