欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年03月11日 12:40:25   作者：我太難了008  
這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

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

我認(rèn)為這種方式比較自由， 不存在組件間的關(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(`確認(rèn)刪除${todo.title}嗎？`)) {
     // 發(fā)布消息
     PubSub.publish('deleteTodo', index); //deleteTodo一定要與訂閱方名稱一樣，index是通信的具體數(shù)據(jù)
 
    }
 
   }
  }
 }
</script>

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

您可能感興趣的文章:

相關(guān)文章

最新評論