本文介紹使用發(fā)布訂閱的方式進行vue組件間的通信

我認為這種方式比較自由， 不存在組件間的關(guān)系問題

1. 首先安裝pubsub-js

npm install --save pubsub-js

2. 訂閱方組件

import PubSub from ’pubsub-js’

mounted(){ // 執(zhí)行異常代碼 // 訂閱消息 PubSub.subscribe(’deleteTodo’,(msg,index)=>{ this.deleteTodo(index) // 調(diào)用deleteTodo方法執(zhí)行真正的業(yè)務(wù)邏輯 });},

3. 發(fā)布方組件

<script> import PubSub from ’pubsub-js’ export default{ methods: { handlerEnter(isEnter){ if (isEnter) { this.bgColor = ’gray’; this.isShow = true; } else { this.bgColor = ’white’; this.isShow = false; } }, deleteItem(){ // 表示從this對象中取出todo,index,deleteTodo三個對象 const {todo, index, deleteTodo} = this if (window.confirm(`確認刪除${todo.title}嗎？`)) { // 發(fā)布消息 PubSub.publish(’deleteTodo’, index); //deleteTodo一定要與訂閱方名稱一樣，index是通信的具體數(shù)據(jù) } } } }</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。