组件绑定v-model，实现最大化复用

Posted 2021-12-13 diantao

看优秀的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’的值就会改变

以后想在哪个页面调用这个按钮都没问题，实现最大化的复用