码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-05-31 13:53:10      阅读:87      评论:0      收藏:0      [点我收藏+]

标签: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’的值就会改变

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

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

标签:boolean   com   技术   pointer   src   样式   自己   点赞   app   

原文地址:https://www.cnblogs.com/diantao/p/10954554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!