自定义组件与组件复用

简介

        当一个项目出现大量相似的模块时毫无疑问组件化是最合理方便的做法，通过传参的不同渲染不同的组件，通过class类渲染不同的样式，通过vue的v-if v-else-if 甚至可以实现组件内标签的更改增加减少，这需要特殊操作，这里介绍了如何进行组件的复用和合理的定义组件，下面将以一个简单的例子来介绍

一个随意定义基于vant的自定义组件

  请配合代码下的文字读该代码

 <btn-liking
        class="btn-liking"
        :is_liked="is_liked"
        :art_id="thearticle.art_id || 0"
        @toLiking="is_liked = 1"
        @quitLiking="is_liked = -1"
        @toDisLiking="is_liked = 0"
      ></btn-liking>

<template>
  <van-button
    icon="good-job"
    type="default"
    v-if="is_liked === 1"
    :loading="isLoading"
    class="likeing"
    @click="quitlikeing"
  />
  <span v-else-if="is_liked === -1"
    ><van-button
      icon="good-job-o"
      type="default"
      :loading="isLoading"
      class="good-btn"
      @click="goLikeing"
    />
    <van-button
      icon="good-job-o"
      type="default"
      :loading="isLoading"
      class="notGood"
      @click="goDisLikeing"
    />
  </span>

  <van-button
    icon="good-job"
    type="default"
    v-else
    :loading="isLoading"
    class="notGood"
    @click="quitDislikeing"
  />
</template>



<style lang="less" scoped>
.likeing {
  .van-icon {
    color: #ffa000;
  }
}
.notGood {
  .van-icon {
    transform: rotate(180deg);
    color: rgb(255, 0, 0);
  }
}

.good-btn {
  margin-right: 10px !important;
}
</style>

由于太长了把script部分去除了只留下了template模板部分 渲染的页面图片：
  

 通过点击交互有三种形态，就像图片表达的一样

该组件对外修改样式的接口有：

1 该组件通过传递的参数:is_liked="is_liked"不同呈现出不同的形态，我们可以通过不同的传参进行控制组件的标签变化

2

<btn-liking
        class="btn-liking"
        :is_liked="is_liked"
        :art_id="thearticle.art_id || 0"
        @toLiking="is_liked = 1"
        @quitLiking="is_liked = -1"
        @toDisLiking="is_liked = 0"
      ></btn-liking>

在这里加了一个btn-liking的样式 

 

        在三种不同形态下的 此组件发现在浏览器渲染出来是都包括的这个类名，毫无疑问在这个组件内是可以通过这个类名改变其样式的，以此得出结果：想要方便的通过class类名改变该组件的样式其内部的标签就不能单独裸露，合理的设计必须加上一个父元素，以保障当父组件使用不同样式复用该组件时不会出现变量污染，和样式混乱。

3 自定义一个参数进行控制组件

        父组件自己传入一个参数告知组件是我在使用你，参数类型建议是Boolean型简单方便，子组件接受是默认该参数是false值，只有我用时才渲染与其他不同的页面，这里的自由度就很高了需要小心使用