Vue中的消息订阅与发布(pubsub)

最新推荐文章于 2024-09-07 15:49:58 发布

C20001206

最新推荐文章于 2024-09-07 15:49:58 发布

阅读量26

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/C20001206/article/details/131425418

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章介绍了如何使用pubsub-js库在Vue组件之间实现通信。首先，通过npm安装库，然后在需要接收数据的组件中引入并订阅特定消息。在订阅的回调函数中处理接收到的数据。发布数据则通过调用pubsub.publish方法。此外，还提到了在组件销毁前需要取消订阅以防止内存泄漏。在示例中，Student组件向School组件发送学生姓名。

摘要由CSDN通过智能技术生成

1.一种组件间的通信方式，适用于任意组件间通信

2.使用步骤：

1.安装pubsub: npm i pubsub-js

2.引入： import pubsub from 'pubsub-js'

注意：哪个组件要接收数据，就要在哪个组件中引入这个消息订阅与发布的库

3.接收数据：A组件想要接收数据，则在A组件中订阅消息，订阅的回调在A中组件自身

第一种写法：

methods() {
    demo(消息名， 数据) {
        ......
    }
},

......
mounted() {
    this.pid = pubsub.subscribe('xxx', this.demo) //订阅消息
}

第二种写法：

mounted() {
    this.pid = pubsub.subscribe('xxx', (msgName, data) => {  //若这里写普通函数的话函数中this的指向就会是undefined，使得后续操作数据不方便，写成箭头函数，使得函数没有this,在函数中使用this的话仍然指向Vue实例对象
    ......
    }) //订阅消息
}

4.提供数据： pubsub.publish('xxx', 数据)

5.最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid) //取消订阅

代码模块展示：

App组件

<template>
 <div>
  <School/>
  <Student/>
 </div>
</template>

<script>
//引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  data() {
    return {

    }
  },
  components:{School,Student}
}
</script>

<style>

</style>

Student组件：

<template>
  <div>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生年龄：{{ age }}</h2>
    <button @click="sendStudentName">点我将学生名给School</button>
  </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            name: '张三',
            age: 18
        }
    },

    methods: {
        sendStudentName() {
            // this.$bus.$emit('sendName', this.name)
            // 利用消息订阅与发布实现数据传递
            // 发布消息
            PubSub.publish('hello', this.name ) 
        }
    },

    mounted() {
        console.log(this.x)
    },
}
</script>

<style>

</style>

School组件：

<template>
  <div>
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
export default {
    name: 'School',
    data() {
        return {
            name: '中北大学',
            address: '山西'
        }
    },

    mounted() {
        // this.$bus.$on('sendName', (data) => {
        //     console.log('School得到了学生的名字', data)

        // })
        this.pubId = PubSub.subscribe('hello', (msgName, message) => {
            console.log('School收到了学生姓名', message)
        })
    },

    beforeDestroy() {
        // this.$bus.$off('sendName') //销毁当前组件之前销毁绑定的自定义事件
        PubSub.unsubscribe(this.pubId) // 销毁当前组件之前取消订阅

    }
}
</script>

<style>

</style>