Vue组件间的通信pubsub-js实现步骤解析
程序员文章站
2023-09-27 16:32:01
本文介绍使用发布订阅的方式进行vue组件间的通信我认为这种方式比较*, 不存在组件间的关系问题1. 首先安装pubsub-jsnpm install --save pubsub-js2. 订阅方组件...
本文介绍使用发布订阅的方式进行vue组件间的通信
我认为这种方式比较*, 不存在组件间的关系问题
1. 首先安装pubsub-js
npm install --save pubsub-js
2. 订阅方组件
import pubsub from 'pubsub-js'
mounted(){ // 执行异常代码 // 订阅消息 pubsub.subscribe('deletetodo',(msg,index)=>{ this.deletetodo(index) // 调用deletetodo方法执行真正的业务逻辑 }); },
3. 发布方组件
<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}吗?`)) { // 发布消息 pubsub.publish('deletetodo', index); //deletetodo一定要与订阅方名称一样,index是通信的具体数据 } } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。