1.什么是PubSub-js?
PubSub.js是一个用Javascript编写的基于主题的发布/订阅库,这种方式的思想与全局事件总线很相似。
PubSubJS有同步解耦,所以主题是异步开发的。这有助于使你的程序保持可预测性,因为在消费者处理主题时,主题的发起者不会被阻止。
它包含以下操作:
(1)订阅消息——对应绑定事件监听
(2)发布消息——分发事件
(3)取消消息订阅——解绑事件监听
2.主要特点
无依赖
同步解耦
ES3兼容。PubSub-js能够在任何可以执行JavaScript的地方运行。浏览器、服务器、电子阅读器、手机、游戏机
AMD/Common.JS模块支持
不修改订阅者(jquery自定义事件修改订阅者)
易于理解和使用
小于1kb压缩
3.安装PubSubJS
有几种方法可以获取PubSubJS
1.通过npm(npm install pubsub-js)安装
4.使用PubSubJS
School组件
<template>
<div class="school">
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name:'School',
data() {
return {
}
},
mounted() {
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
console.log(this)
console.log('有人发布了hello消息,hello消息的回调执行了',msgName,data)
})
},
beforeDestroy() {
pubsub.unsubscribe(this.pubId)
},
}
</script>
<style scoped>
.school{
background-color: skyblue;
padding: 5px;
}
</style>
Student组件
<template>
<div class="student">
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
name:'Student',
data() {
return {
studentName: "张三"
}
},
mounted() {
},
methods: {
sendStudentName(){
pubsub.publish('hello',this.studentName)
}
},
}
</script>
<style lang="less" scoped>
.student{
background-color: pink;
padding: 5px;
margin-top: 30px;
}
</style>
App组件
<template>
<div class="app">
<School/>
<Student/>
</div>
</template>
<script>
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{School,Student},
data() {
return {
}
}
}
</script>
<style scoped>
.app{
background-color: gray;
padding: 5px;
}
</style>