<div class="collection"><el-button @click="collect">收藏</el-button></div>点击收藏按钮，上传KNOWLEDGEID参数到post接口，这个是上传的参数类型KNOWLEDGEID: detailContent.value.ID； 这是封装的接口： export function AddKnowledgeCollectApi(data: AddKnowledgeCollect): AxiosPromise<KnowledgeCollectItem[]> { return http({ url: '/T_KMS_BU_KNOWLEDGECOLLECT/Add', method: 'post', data }); } 这是接口类型：export interface AddKnowledgeCollect { KNOWLEDGEID: string }在vue3中实现这个功能，并增加收藏成功的话，按钮从收藏变成取消收藏；取消收藏的接口是：export function DeleteByKnowledgeApi(params: DeleteKnowledge): AxiosPromise<KnowledgeCollectItem[]> { return http({ url: '/T_KMS_BU_KNOWLEDGECOLLECT/DeleteByKnowledgeId', method: 'get', params }); }这个是接口类型：export interface DeleteKnowledge { knowledgeId: string, }，如果取消收藏成功，则按钮变回收藏

好的，这是一个实现收藏和取消收藏的功能的示例代码，其中包括上传参数和更新按钮状态：

<template>
  <div>
    <el-button @click="toggleCollection">{{ isCollected ? '取消收藏' : '收藏' }}</el-button>
  </div>
</template>

<script>
import { AddKnowledgeCollectApi, DeleteByKnowledgeApi } from '@/api/knowledge'
import { ref } from 'vue'

export default {
  setup(props) {
    const detailContent = ref(props.detailContent) // 详情内容
    const isCollected = ref(false) // 是否已收藏

    // 点击收藏按钮
    async function collect() {
      try {
        // 调用收藏接口
        await AddKnowledgeCollectApi({ KNOWLEDGEID: detailContent.value.ID })
        isCollected.value = true // 更新状态
      } catch (e) {
        console.error('收藏失败：', e)
      }
    }

    // 点击取消收藏按钮
    async function cancelCollect() {
      try {
        // 调用取消收藏接口
        await DeleteByKnowledgeApi({ knowledgeId: detailContent.value.ID })
        isCollected.value = false // 更新状态
      } catch (e) {
        console.error('取消收藏失败：', e)
      }
    }

    // 切换收藏状态
    function toggleCollection() {
      if (isCollected.value) {
        cancelCollect() // 取消收藏
      } else {
        collect() // 收藏
      }
    }

    return {
      isCollected,
      toggleCollection
    }
  }
}
</script>

这里使用了 Vue 3 的 Composition API，使用 `ref` 创建了 `detailContent` 和 `isCollected` 两个响应式变量，并在 `setup` 函数中定义了 `collect`、`cancelCollect` 和 `toggleCollection` 三个函数。

在 `collect` 函数中，调用 `AddKnowledgeCollectApi` 接口，传入参数 `KNOWLEDGEID: detailContent.value.ID`，其中 `detailContent.value.ID` 为收藏的知识点 ID。如果接口调用成功，将更新 `isCollected` 的值为 `true`，按钮的文本也会相应地改变。

在 `cancelCollect` 函数中，调用 `DeleteByKnowledgeApi` 接口，传入参数 `knowledgeId: detailContent.value.ID`，其中 `detailContent.value.ID` 为要取消收藏的知识点 ID。如果接口调用成功，将更新 `isCollected` 的值为 `false`，按钮的文本也会相应地改变。

在 `toggleCollection` 函数中，根据 `isCollected` 的值来判断是收藏还是取消收藏。如果当前已收藏，则调用 `cancelCollect` 函数；如果当前未收藏，则调用 `collect` 函数。

最后，在模板中使用 `el-button` 组件，点击按钮时调用 `toggleCollection` 方法，按钮的文本会根据 `isCollected` 的值自动更新。