Vue.js 中使用PubSub.js 进行同级组件间通信

超、凢脫俗 2023-01-07 11:26 148阅读 0赞

1. 首先安装pubsub-js

`npm install --save pubsub-js`

2. 订阅方组件

`import PubSub from 'pubsub-js'`

<table> 
 <tbody> 
 <tr> 
 <td> <code>mounted(){ </code><code>// 执行异常代码</code> <code>&nbsp;</code><code>// 订阅消息</code> <code>&nbsp;</code><code>PubSub.subscribe(</code><code>'deleteTodo'</code><code>,(msg,index)=&gt;{ </code> <code>&nbsp;&nbsp;</code><code>this</code><code>.deleteTodo(index) </code><code>// 调用deleteTodo方法执行真正的业务逻辑</code> <code>&nbsp;</code><code>});</code> <code>},</code> </td> 
 </tr> 
 </tbody> 
</table>

3、发布方组件

<table> 
 <tbody> 
 <tr> 
 <td> <code>&lt;script&gt;</code> <code>&nbsp;</code><code>import PubSub from </code><code>'pubsub-js'</code> <code>&nbsp;</code><code>export </code><code>default</code><code>{ </code> <code>&nbsp;&nbsp;</code><code>methods: { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>handlerEnter(isEnter){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(isEnter) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.bgColor = </code><code>'gray'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.isShow = </code><code>true</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.bgColor = </code><code>'white'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.isShow = </code><code>false</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;</code><code>deleteItem(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 表示从this对象中取出todo,index,deleteTodo三个对象</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const {todo, index, deleteTodo} = </code><code>this</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(window.confirm(`确认删除${todo.title}吗？`)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 发布消息</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>PubSub.publish(</code><code>'deleteTodo'</code><code>, index); </code><code>//deleteTodo一定要与订阅方名称一样，index是通信的具体数据</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>