vue通信事例(发布订阅模式)
2019-12-24 本文已影响0人
追马的时间种草
父子兄弟之间的通信
-
效果图：
image.png
-
css代码：
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
.container {
box-sizing: border-box;
padding: 10px 20px;
margin: 0 30px;
width: 300px;
border: 1px solid #aaaaaa;
}
.container h3 {
font-size: 16px;
line-height: 32px;
border-bottom: 1px dashed #dedede;
}
- 组件代码：
<body>
<div id="app">
<my-vote v-for='(item,index) in voteList' :key='item.id' :post='item'></my-vote>
</div>
<!-- TEMPLATE -->
<!-- all`s parent -->
<template id="MyVoteTemplate">
<div class="container">
<h3><span v-text='post.title'></span><span>总票数：</span><span v-text='allNum'></span></h3>
<vote-content :eventbus='eventBus'></vote-content>
<vote-button :eventbus='eventBus' @changeallnum='changeAllNum'></vote-button>
</div>
</template>
<!-- Content： vote show -->
<template id="VoteCotentTemplate">
<div class="content">
<p>支持票数：<span v-text='supNum'></span></p>
<p>反对票数：<span v-text='oppNum'></span></p>
<p>支持率：<span v-text='ratio'></span></p>
</div>
</template>
<!-- Button：support or oppose -->
<template id="VoteButtonTemplate">
<div class="footer">
<button type="button" class="btn btn-success" @click="handle('support')">Success</button>
<button type="button" class="btn btn-danger" @click="handle('oppose')">Danger</button>
</div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const VoteContent = {
template: '#VoteCotentTemplate',
props: ['eventbus'],
data() {
return {//支持或反对票数
supNum: 0,
oppNum: 0,
}
},
computed: { //计算比例
ratio() {
let total = this.supNum + this.oppNum
if (total === 0) {
return '0%'
}
return (this.supNum / total * 100).toFixed(2) + '%'
}
},
methods: {
changeNum(type) {//判断点击支持或反对
type === 'support' ? this.supNum++ : this.oppNum++
}
},
created() {//通过eventbus.$on对自定义changesupport方法进行订阅
this.eventbus.$on('changesupport', this.changeNum)//自定义事件
}
}
const VoteButton = {
template: '#VoteButtonTemplate',
props: ['eventbus'],
data() {
return {
}
},
methods: {
handle(type) {
this.$emit('changeallnum', type)//通过$emit触发父组件事件
this.eventbus.$emit('changesupport', type)//通过点击传入的type，使eventbus.$emit对兄弟组件订阅自定义事件进行发布
}
}
}
const MyVote = {
template: '#MyVoteTemplate',
props: ['post'],
data() {
return {
allNum: 0,
eventBus: new Vue // 创建事件集合eventbus，在dom中对子组件绑定后模板子组件中用prop引入，通过$on,$emit进行发布和订阅处理
}
},
components: {//将子组件在父组件中进行注册
VoteButton,
VoteContent
},
methods: {
changeAllNum() {//总票数，通过@changeallnum进行改事件绑定到子组件上，使子组件触发可以出发改事件
this.allNum++
}
}
}
let vm = new Vue({
el: '#app',
data: {
voteList: [{
id: 1,
title: 'alice很帅'
},
{
id: 2,
title: 'alice很好'
}]
},
//=>注册当前组件（视图中）需要的局部组件
components: {
MyVote
}
})
</script>
</body>
