Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析

更新時(shí)間：2020年03月11日 12:40:25 作者：我太難了008

這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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

我認(rèn)為這種方式比較自由，不存在組件間的關(guān)系問(wè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對(duì)象中取出todo,index,deleteTodo三個(gè)對(duì)象
    const {todo, index, deleteTodo} = this
    if (window.confirm(`確認(rèn)刪除${todo.title}嗎？`)) {
     // 發(fā)布消息
     PubSub.publish('deleteTodo', index); //deleteTodo一定要與訂閱方名稱一樣，index是通信的具體數(shù)據(jù)
 
    }
 
   }
  }
 }
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

pubsub-js在react中的使用教程

相關(guān)文章

vue父組件給子組件的組件傳值provide inject的方法
在本篇文章里小編給大家整理的是一篇關(guān)于vue父組件給子組件的組件傳值provide inject的方法，需要的朋友們學(xué)習(xí)下。
2019-10-10
Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說(shuō)明
這篇文章主要介紹了Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue-cli 為項(xiàng)目設(shè)置別名的方法
這篇文章主要介紹了vue-cli 為項(xiàng)目設(shè)置別名的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
基于Vue.js 實(shí)現(xiàn)簡(jiǎn)易拖拽指令
在 Vue.js 中,我們可以通過(guò)自定義指令的方式來(lái)實(shí)現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實(shí)現(xiàn)一個(gè)簡(jiǎn)易的拖拽指令,感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue父子組件的互相傳值和調(diào)用
這篇文章主要介紹了vue父子組件的互相傳值和調(diào)用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue路由傳參 router-link和編程式傳參方式
這篇文章主要介紹了vue路由傳參 router-link和編程式傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue父組件與子組件之間的數(shù)據(jù)交互方式詳解
最近一直在做一個(gè)vue移動(dòng)端商城的實(shí)戰(zhàn),期間遇到一個(gè)小小的問(wèn)題,值得一說(shuō),下面這篇文章主要給大家介紹了關(guān)于vue父組件與子組件之間數(shù)據(jù)交互的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue Element前端應(yīng)用開發(fā)之根據(jù)ABP后端接口實(shí)現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息，實(shí)現(xiàn)對(duì)前端界面的開發(fā)工作。
2021-05-05
vue中父組件通過(guò)props向子組件傳遞數(shù)據(jù)但子組件接收不到解決辦法
大家都知道可以使用props將父組件的數(shù)據(jù)傳給子組件,下面這篇文章主要給大家介紹了關(guān)于vue中父組件通過(guò)props向子組件傳遞數(shù)據(jù)但子組件接收不到的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
vue實(shí)現(xiàn)圖片拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11