最近在用vue做專案，學習了不少東西，但是有時候光顧著做專案卻忘記要找個時間來整理一下最近的一些學習新得，因為是新手，所以可能會有錯誤的地方，歡迎指出和交流呀~~~關於父子元件以及非父子元件之間的資料通訊
元件之間資料通訊.png
1 父子元件之間資料通訊
一般父元件向子元件傳遞資料用prop進行傳遞，注意，子元件不能對prop中的資料進行更改，vue中規定是防止子元件對父元件中的資料進行竄改。而子元件向父元件進行資料傳遞則可以通過事件觸發父元件的事件來實現資料的傳遞。（是不是有點懵逼了，看個例子吧 ）
（這裡我就直接摘取一段專案中的例子**來說明）
使用prop進行資料傳遞：
//這是父元件中的部分**，父元件向子元件傳遞資料（method,dialogformvisible）
// 父元件的部分**
新增員工
// 父元件的script**
export default
dialogformvisible: false
} }
}// 子元件中則需要加prop屬性資料 ，如下所示：
export default
//所以只要父元件中的資料變化修改，子元件中的資料也會跟這修改；
prop資料通訊.png
當然，子元件做完相關操作之後，需要時間的是將屬性值dialogformvisible重新修改為false。若是直接在子元件進行修改的話，就會報錯，因為會影響到父元件的資料，vue中規定不能直接對prop的屬性值進行修改。那麼就可以用事件觸發來實現子元件向父元件傳遞資料了。
///父元件監聽子元件的事件，通過@close="closedialog"和@getemployee="getemployee"來實現監聽；
一旦子元件中的事件close和getemployee發生之後，就會觸發父元件中的事件closedialog和getemployee事件。
// 父元件的部分**
新增員工
//子元件中的事件分發
export default }}
// 當那邊觸發關閉事件的時候，這邊的顯示值就要關閉，那邊會傳過來乙個false
// 父元件的事件
export default
}}
通過建立中間的事件bus匯流排。實現非父子元件之間的資料通訊。
1 bus.js檔案
註冊bus
import vue from 'vue'
export default new vue()
新增任務
import bus from '@/bus'
export default
},addtask () }}
// 模板中的**就不展示了。
主要展示的是script中的**
export default
})}}
有時候小的子元件在頁面中有很多個，需要復用，那麼為了防止每一次觸發相應的事件的時候，都會影響到監聽的對應元件，如下圖所示。我的解決方案就是給每乙個迴圈的子元件賦值乙個index的值；
//這裡我會在每一次元件emit的時候傳遞乙個index的值，另外乙個元件on之後接受引數，會先判斷該index是不是與自己的index相等，如果相等才執行相應的資料改變操作。
bus.$on('adding-task', (state, index) =>
vue元件之間的資料通訊小例子
html html lang en head meta charset utf 8 title 元件之間的通訊 title head body script src js vue.js script div id son message msg son div script 編寫和註冊子元件 vue...
vue 元件資料通訊
父元件傳給子元件props父元件設定props值 text 元件內部資料傳遞 注意 傳遞固定內容say 固定內容 傳遞data裡面的變數 say text 傳boolean值和物件 componen title false duixiang 子元件接收propsprops componentitle...
Vue學習 元件中的資料通訊
目錄元件中的雙向繫結 父元件訪問子元件 children或 refs 子元件訪問父元件 parent 元件的擴充套件 slot 其它訊息內容 data components const cpnc vue.extend const cpnc vue.extend methods decrement f...