首页 > Web开发 > 详细

vue组件间的通信之pubsub-js

时间:2020-03-01 00:22:22      阅读:73      评论:0      收藏:0      [点我收藏+]

本文介绍使用发布订阅的方式进行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>

  

  

 

vue组件间的通信之pubsub-js

原文:https://www.cnblogs.com/z-qinfeng/p/12387268.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!