vue中消息订阅与发布PubSub (原创)

1、npm install pubsub-js --save 

2、PubSub 是一个全局对象，import后可在任何地方都可以直接拿到这个对象。

如图：

App.vue

<template>
  <div id="app">

    <!--  使用pubsub-js 发布订阅组件
     cnpm install pubsub-js --save
     import PubSub from 'pubsub-js'
    -->
   <me href="https://www.baidu.com" title="百度一下" content="百度" />
    <me href="https://www.jd.com" title="京东" content="京东商城"   />
    <me href="https://www.taobao.com" title="淘宝" content="淘宝网" />
  </div>
</template>
<script>

import me from './components/Menu';
import PubSub from 'pubsub-js';
export default {
  name: 'App',
  components: {
    me
  },
 
  mounted(){
    //PubSub 是一个全局对象，import后可在任何地方都可以直接拿到这个对象
    //App 消息订阅，相对于之前的事件绑定，消息主题名称为dd。处理函数中第一个形参t表示主题名称，第二个形参data才是真正的数据
    PubSub.subscribe('dd',(t,data)=>{
      console.log(data);
    });
  }

}
</script>

<style scoped>

</style>

Menu.vue

<template>
  <div>
     <p>
       菜单项：
     <a :href="href" :title='title' target="_blank">{{content}}</a>
       <button @click="doClick">按钮</button>

     </p>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js';

export default {
  name: 'mu',
  data () {
    return {

    }
  },
  methods:{
    doClick(){
       console.log('do click');
       
      //向主题'dd'发送消息
      PubSub.publish('dd','hahahaha');

    }
  },
  //props表示可以从外部(父组件)传入的属性，
  // props中定义的属性可以作为元素自身的data和method属性来使用

  props:['href','title','content']
}
</script>

<style scoped>

</style>