vue父子通信(provider,inject)方法
2019-12-25 本文已影响0人
追马的时间种草
直接上代码吧，效果同vue通信事例(发布订阅模式)的效果一样
<vote-button :eventbus='eventBus' @changeallnum='changeAllNum'></vote-button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
.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;
}
</style>
</head>
<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='nums.supNum+nums.oppNum'></span></h3>
<vote-content></vote-content>
<vote-button></vote-button>
</div>
</template>
<!-- Content： vote show -->
<template id="VoteCotentTemplate">
<div class="content">
<p>支持票数：<span v-text='nums.supNum'></span></p>
<p>反对票数：<span v-text='nums.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')">support</button>
<button type="button" class="btn btn-danger" @click="handle('oppose')">oppose</button>
</div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/element-ui/lib/index.js"></script>
<script>
const VoteContent = {
template: '#VoteCotentTemplate',
inject: ['nums'],
computed: { //计算比例
ratio() {
let total = this.nums.supNum + this.nums.oppNum
if (total === 0) {
return '0%'
}
return (this.nums.supNum / total * 100).toFixed(2) + '%'
}
}
}
const VoteButton = {
template: '#VoteButtonTemplate',
inject: ['change'],
methods: {
handle(type) {
this.change(type)
}
}
}
const MyVote = {
template: '#MyVoteTemplate',
props: ['post'],
provide() {
return {
nums:this.nums,
change: this.change
}
},
data() {
return {
nums: {
supNum: 0,
oppNum: 0
}
}
},
components: {//将子组件在父组件中进行注册
VoteButton,
VoteContent
},
created() {
console.log(this._provided)
},
methods: {
change(type) {
type === 'support' ? this.nums.supNum++ : this.nums.oppNum++
}
}
}
let vm = new Vue({
el: '#app',
data: {
voteList: [{
id: 1,
title: '晓林很帅'
},
{
id: 2,
title: '晓林很好'
}]
},
//=>注册当前组件（视图中）需要的局部组件
components: {
MyVote
},
})
</script>
</body>
</html>
