标签:boolean com 技术 pointer src 样式 自己 点赞 app
看优秀的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’的值就会改变
以后想在哪个页面调用这个按钮都没问题,实现最大化的复用
标签:boolean com 技术 pointer src 样式 自己 点赞 app
原文地址:https://www.cnblogs.com/diantao/p/10954554.html