美文网首页
vue组件之间的交互之消息订阅与发布组件Pubsub

vue组件之间的交互之消息订阅与发布组件Pubsub

作者: yxCassiel | 来源:发表于2021-01-29 11:24 被阅读0次

    前言

    vue组件之间的关系有父子组件、同级组件以及孙父子三级关系、还有更复杂的四级、五级关系,那他们之间的数据以及方法如何传递,也就是父子组件、同级组件、孙子组件等如何调用各自的变量、方法呢?

    正文

    前面博主已经讲了同组件和父子组件的交互,那如果两个没有任何关系的组件或者更复杂的孙与子的三级组件、四级组件之间怎么交互?

    这时再用前面所说的方法已经做不到了或者说很难实现了
    这时就要用消息订阅与发布组件Pubsub了,他可以在任意组件之间实现交互

    步骤

    1.安装PubSub

    首先在终端使用一下指令安装PubSub

    npm install --save pubsub-js

    安装成功就能在这里看到pubsub-js


    在这里插入图片描述

    2.引入组件

    在要使用的组件中引入pubsub-js,这个不能全局引入只能哪个组件中使用就在哪个组件中引入


    在这里插入图片描述

    3.消息订阅

    在被调用的组件中使用 PubSub.subscribe(name,function)订阅消息

    被调用组件

    <template>
      <div id="app">
        <PubSubDemo></PubSubDemo>
      </div>
    </template>
    
    <script>
      import PubSubDemo from './components/PubSubDemo.vue'//子组件
      import PubSub from 'pubsub-js'//引入PubSub
    export default {
      name: 'App',
      components:{
        PubSubDemo  //映射组件
      },
      methods:{
        say(msg){
          alert(msg);
        }
      },
      mounted() {
        //消息订阅,相当于前面的绑定事件监听
        PubSub.subscribe('answer',(msg,data)=>{
          this.say(data);
        })
      }
    
    }
    </script>
    
    <style>
    </style>
    
    

    4.发布

    在调用组件使用 PubSub.publish(name,data);发布消息

    <template>
      <div>
        <button @click="answer">这个世界谁最帅啊?</button>
      </div>
    </template>
    
    <script>
      import PubSub from 'pubsub-js'//引入PubSub
      export default{
        name:'PubSubDemo',
        methods:{
          answer(){
            //发布
            PubSub.publish('answer','博主最帅');
          }
        }
      }
    </script>
    
    <style>
    </style>
    
    

    运行的效果图

    在这里插入图片描述

    相关文章

      网友评论

          本文标题:vue组件之间的交互之消息订阅与发布组件Pubsub

          本文链接:https://www.haomeiwen.com/subject/llrqtltx.html