el-button的封装

描述：在项目中，多个页面都需要实现关注（取关）按钮，因而我们将这一实现抽离出来独立封装。

//子组件
<template>
    <el-button
    v-if="isFollowed"
    type="info"
    @click="onFollow"
    :loading="loading">
        已关注
    </el-button>
    <el-button
    v-else
    type="danger"
    @click="onFollow"
    :loading="loading">
        关注
    </el-button>
</template>

<script>
export default {
  name: 'followButton',
  props: {
    isFollowed: {
      type: Boolean,
      required: true
    },
    // 修改状态所需要的key
    followKey: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    onFollow () {
      this.loading = true
      if (this.isFollowed) {
        // 执行取关逻辑
      } else {
        // 执行关注逻辑
      }
      // 传出关注信息，更新视图
      this.$emit('update-followed', !this.isFollowed)

      this.loading = false
    }
  }
}
</script>

//父组件
    <followButton
    :isFollowed="isFollowed"
    :followKey="key"
    @update-followed="isFollowed=$event"
    >
    </followButton>