Vue2.0进阶 - 09. 消息订阅与发布

Vue2.0进阶学习

消息订阅与发布

  1. yarn add pubsub-js 安装消息订阅与发布框架
  2. 订阅消息 mounted时 this.pubId = pubsub.subscribe(‘消息名称’, (消息名称, 消息传递数据) => {}); 消息传递数据可以是字符串、数据、数据或对象
  3. 取消订阅消息 beforeDestroy时 pubsub.unsubscribe(this.pubId)
  4. 组件发布消息 pubsub.publish(‘消息名称’,消息传递数据})
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
<div class="dvapp">
<!--
消息订阅与发布
1. yarn add pubsub-js 安装消息订阅与发布框架
2. 订阅消息 mounted时 this.pubId = pubsub.subscribe('消息名称', (消息名称, 消息传递数据) => {}); 消息传递数据可以是字符串、数据、数据或对象
3. 取消订阅消息 beforeDestroy时 pubsub.unsubscribe(this.pubId)
4. 组件发布消息 pubsub.publish('消息名称',消息传递数据})
-->
<h2>app组件</h2><br/>
<span>学生的姓名是:{{stuName}}</span> <br/>
<Student ref="stu"></Student>
</div>
</template>

<script>
import pubsub from 'pubsub-js';
import Student from './components/Student.vue';
export default {
name: 'App',
data() {
return {
stuName:''
}
},
components: {
Student
},
methods: {

},
mounted() {
this.pubId = pubsub.subscribe('subMessage', (messasgeName, param) => {
console.log('messasgeName',messasgeName);
this.stuName = param.stuName
});
},
beforeDestroy() {
pubsub.unsubscribe(this.pubId)
},
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.dvapp
{
background-color: aquamarine;
}
</style>
student.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div class="studv">
<h2>Student组件</h2>
<span>姓名:{{stuName}}</span><br/>
<button @click="publishMessageClick">发布消息传递数据</button>
</div>
</template>

<script>
import pubsub from 'pubsub-js';
export default {
data() {
return {
stuName:'odinsam'
}
},
methods: {
publishMessageClick() {
pubsub.publish('subMessage',{stuName:this.stuName})
}
},
}
</script>

<style lang="css">
.studv{
background-color:bisque;
width:200px;
padding:50px;
margin-left:50px;
}
</style>

Vue2.0 基础学习目录

完整代码可以在 GitHub