博客

我们前面讲了父子组件之间通过prop来实现消息传递；但是再其他情况，比如兄弟组件，爷孙组件消息传递时候，就要用到高级的消息订阅与发布；

首先我们安装下消息订阅与发布pubsub组件；

命令：npm install –save pubsub-js



然后我们来改造下前面的案例；

修改App.vue：

<template>
 <!--声明标签-->
  <Menu :menus="menus" :webSite="webSite"></Menu>
</template>

<script>
  import PubSub from 'pubsub-js'
  import Menu from './components/Menu'  // 引入组件
  export default {
    name: 'App',
    components:{
      Menu:Menu  // 映射组件标签，ES6中属性名和属性值相同可以省略属性值只写属性名
    },
    data(){
      return { //定义菜单的对象数组,将其传递给子组件
        menus:[{id:1,name:'科技'},{id:2,name:'文化'},{id:3,name:'政治'}],
        webSite:{url:'https://cn.vuejs.org/',title:'Vue.js官网'}
      }
    },
    methods:{
      addMenu(menu){
        this.menus.push(menu)
      }
    },
    mounted() {
      // 订阅消息，相当于前面的绑定事件监听；
      // 订阅消息，参数一 消息名  参数二 处理的回调函数
      PubSub.subscribe('add',(msg,data)=>{
        console.log("msg："+msg)
        console.log("data："+data)
        this.addMenu(data);
      })
    }
  }
</script>

<style scoped>
</style>

修改Menu.vue：

<template>
  <div>
    <a :href="webSite.url" :title="webSite.title">
    <img src="../assets/logo.png" height="74" width="216"/>
    </a>
    <ul>
      <li v-for="(menu,index) in menus":key="menu.id">
        <a :href="'http://localhost:8080/meun/'+menu.id">{{menu.name}}</a>
      </li>
    </ul>
    <input type="text" v-model="content"/>
    <button @click="add">添加</button>
  </div>
</template>

<script>
    import PubSub from 'pubsub-js' //引入消息组件
    export default {
        name: "Menu",
        //声明接收属性：这个属性就会成为组件对象的属性
        props: ["menus","webSite"],
        data(){
            return {content:''}
        },
        methods:{
          add(){
            const content=this.content.trim();
            if(!content){
              alert('菜单名称不能为空')
              return
            }
            let menu={id:4,name:content}
            // 发布消息，相当于前面的触发事件
            // 发布消息 相当于触发事件  参数一 发布的消息名，参数二 数据参数
            PubSub.publish('add',menu)
          }
        }
    }
</script>

<style scoped>
  ul li{
    float: left;
    padding-left: 5px;
    list-style-type: none;
  }
</style>

测试OK