消息订阅与发布

消息订阅与发布是一种组件间通信的方式，在很多框架中都能使用，在这里我使用pubsub-js这个包来实现组件通信。

安装

npm i pubsub-js

使用

举个例子：有两个组件StudentInfo与HeaderInfo，现在想把StudentInfo中的数据传递给HeaderInfo

HeaderInfo组件

<template>
  <div class="header">
    <h1>{{msg}}</h1>
    <h2>app的数据:{{info}}--{{num}}--{{color}}</h2>
    <h2>student的数据</h2>
  </div>
</template>

<script scope>
import pubsub from 'pubsub-js'
export default {
    name:'HeaderInfo',
    data(){
        return {
            msg:'这是头部组件'
        }
    },
    //消息订阅，studentData是消息名，this.getData是指定回调
    mounted(){
        this.pubId=pubsub.subscribe('studentData',this.getData)
    },
    methods:{
        getData(_,name){
            console.log(name);
        }
    },
    //通常在组件卸载前取消订阅
    beforeDestroy(){
        pubsub.unsubscribe(this.pubId)
    }


}
</script>

<style>
    .header{
        background-color: antiquewhite;
        padding: 5px;
    }
</style>

StudentInfo组件

<template>
  <div class="student"> 
    <h3>学生姓名：{{name}}</h3>
    <h3>学生年龄：{{age}}</h3>
    <h3>学生性别：{{sex}}</h3>
    <button @click="send(name,age,sex)">发送数据</button>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    name:'StudentInfo',
    data(){
        return {
            name:'xxx',
            age:'22',
            sex:'男'
        }
    },
    methods:{
        send(name,age,sex){
            //发布消息
            pubsub.publish('studentData',name)
        }
    }
}
</script>

<style>
    .student{
        margin: 5px;
        background-color: cornflowerblue;
    }
</style>