Vue組件間的通信pubsub-js實現(xiàn)步驟解析
更新時間：2020年03月11日 12:40:25 作者：我太難了008
這篇文章主要介紹了Vue組件間的通信pubsub-js實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
本文介紹使用發(fā)布訂閱的方式進行vue組件間的通信
我認為這種方式比較自由， 不存在組件間的關系問題
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è)務邏輯
});
},
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項目時遇到微信掃描二維碼的然后進入公眾號網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊涂，然后到了蘋果端的時候，就只能出現(xiàn)一個保存圖片，然后就寫一下記錄一下這問題的解決方法2020-01-01
這篇文章主要為大家介紹了webpack項目中使用vite加速的兼容模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue實踐---根據(jù)不同環(huán)境,自動轉(zhuǎn)換請求的url地址操作
這篇文章主要介紹了vue實踐---根據(jù)不同環(huán)境,自動轉(zhuǎn)換請求的url地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中使用Sortable的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue 實現(xiàn)websocket發(fā)送消息并實時接收消息
這篇文章主要介紹了vue 實現(xiàn)websocket發(fā)送消息并實時接收消息,項目結(jié)合vue腳手架和websocket來搭建，本文給大家分享實例代碼，需要的朋友可以參考下2019-12-12
element-ui vue input輸入框自動獲取焦點聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動獲取焦點聚焦方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2+elementui上傳照片方式(el-upload超簡單)
這篇文章主要介紹了vue2+elementui上傳照片方式(el-upload超簡單),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了nuxt.js寫項目時增加錯誤提示頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11