zoukankan      html  css  js  c++  java
  • 组件绑定v-model,实现最大化复用

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

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

  • 相关阅读:
    csps模拟测试70
    模拟测试66反思
    csps63总结
    csps60爆零记
    csps模拟测试57
    模拟测试52,53反思
    LOJ2542「PKUWC2018」随机游走
    LOJ6300 BZOJ5283 [CodePlus 2018 3 月赛]博弈论与概率统计
    2019暑假集训
    省队二轮集训笔记
  • 原文地址:https://www.cnblogs.com/diantao/p/10954554.html
Copyright © 2011-2022 走看看