看优秀的vue项目，对组件的封装做的都非常到位，比如一个按钮都可以实现复用，仔细研究会发现实现基础就是组件直接绑定v-model，来看看按钮：
比如有个点赞按钮，长这样：
当点赞之后变成这样：
相信很多人会直接在当前这个组件里写上DOM结构，样式和点击事件，其实这样会造成严重的耦合，也没法复用，封装起来就方便多了。
先建个按钮组件，approvelBtn.vue：
<template>
<div class="approve-btn">
<span @click="support" class="apv-btn">
<span v-if="!value">点赞</span>
<span v-else>已点赞</span>
</span>
</div>
</template>
<script>
export default {
name: ‘ApprovelBtn‘,
props: {
value: {
type: Boolean,
default: true
}
},
methods: {
support() {
this.$emit(‘input‘, true)
}
}
}
</script>
<style scoped>
.approve-btn{
line-height: 2.5;
}
.apv-btn{
border:1px solid #CCC;
padding: 0.5em 1em;
border-radius: 0.5em;
cursor: pointer;
}
</style>
父组件引入即可：
<approvel-btn v-model="hasApv"></approvel-btn>
v-model的变量名自己随意写，当按钮点击后会执行
this.$emit(‘input‘, true)
‘hasApv’的值就会改变
以后想在哪个页面调用这个按钮都没问题，实现最大化的复用
原文：https://www.cnblogs.com/diantao/p/10954554.html