点赞，取消点赞组件

<template>
  <div class="collect-container">
    <van-loading v-if="isLoading" type="spinner" color="#1989fa"></van-loading>
    <van-icon
      v-else
      :color="attitude === 1 ? '#ff0000' : '#777'"
      :name="attitude === 1 ? 'good-job' : 'good-job-o'"
      @click="clickHandler"
    />
  </div>
</template>

<script>
import { addLikeArticleApi, delLikeArticleApi } from "@/api/Article";
export default {
  name: "collectArticle",
  data() {
    return {
      isLoading: false, // 节流阀
    };
  },
  props: {
    // 是否点赞，对文章的态度  1   2
    attitude: {
      type: [String, Number],
      required: true,
    },
    // 文章的 id
    articleId: {
      type: [String, Number],
      required: true,
    },
  },
  methods: {
    async clickHandler() {
      // 判断是否登录了，未登录不允许点击
      if (!this.$store.state.user) return this.$toast.fail("登录后才可以操作");
      // 节流阀 => 开始转圈圈
      this.isLoading = true;
      try {
        if (this.attitude === 1) {
          // 去过已经点赞就取消
          await delLikeArticleApi(this.articleId);
        } else {
          // 如果未点赞就点赞
          await addLikeArticleApi({
            target: this.articleId,
          });
        }
        // 更新视图（按钮的状态）
        // vue 是单向数据流传递
        const newNum = this.attitude === 1 ? 0 : 1;
        this.$emit("changeAttitude", newNum);
      } catch (error) {
        console.log({ error });
        this.$toast.fail("操作失败");
      }
      this.isLoading = false;
    },
  },
};
</script>

<style>
</style>

父组件传值 ：

   <!-- 点赞组件 likeArticle -->
          <likeArticle
            :article-id="articleInfo.art_id"
            :attitude="articleInfo.attitude"
            @changeAttitude="articleInfo.attitude = $event"
          ></likeArticle>