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