站长资源
中国站长网站

vue组件之间通信之消息订阅与发布插件Pubsub.js

前言

vue组件之间的关系有父子组件、同级组件以及孙父子三级关系、还有更复杂的四级、五级关系,那他们之间的数据以及方法如何传递,也就是父子组件、同级组件、孙子组件等如何调用各自的变量、方法呢?
前面博主已经讲了同组件和父子组件的交互,那如果两个没有任何关系的组件或者更复杂的孙与子的三级组件、四级组件之间怎么交互?
这时再用前面所说的方法已经做不到了或者说很难实现了
这时就要用消息订阅与发布组件Pubsub了,他可以在任意组件之间实现交互

1.安装PubSub

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

npm install --save pubsub-js

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

2.引入组件

在要使用的组件中引入pubsub-js,这个不能全局引入只能哪个组件中使用就在哪个组件中引入,使用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>

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>


本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » vue组件之间通信之消息订阅与发布插件Pubsub.js

评论 3

评论前必须登录!

 


    Warning: A non-numeric value encountered in /www/wwwroot/www.wangdahai.cn/wp-content/themes/dux/modules/mo_comments_list.php on line 63
  1. #-9

    为什么不能全局引用?

    damon3年前 (2021-02-18)
  2. #-8

    可以在src/main.js中引用呀

    damon3年前 (2021-02-18)
    • 可能是我用的版本问题

      全栈工程师3年前 (2021-02-20)