Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
本文介紹使用發(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í)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. PHP驗(yàn)證碼工具-Securimage2. Vue 實(shí)現(xiàn)對quill-editor組件中的工具欄添加title3. JavaScript實(shí)現(xiàn)簡單的彈窗效果4. 我所理解的JavaScript中的this指向5. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)6. PHP利用curl發(fā)送HTTP請求的實(shí)例代碼7. Java commons-httpclient如果實(shí)現(xiàn)get及post請求8. PHP單件模式和命令鏈模式的基礎(chǔ)知識9. 一文帶你徹底理解Java序列化和反序列化10. js實(shí)現(xiàn)碰撞檢測

網(wǎng)公網(wǎng)安備