vue3+ts怎么做点击关注

首先，需要定义一个关注按钮，并添加点击事件。可以使用Vue3的`defineComponent`函数定义一个组件，然后在模板中添加一个按钮，并绑定`@click`事件。示例代码如下：

<template>
  <button @click="handleFollow">{{ isFollowed ? '取消关注' : '关注' }}</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    isFollowed: Boolean
  },
  emits: ['follow'],
  methods: {
    handleFollow() {
      this.$emit('follow', !this.isFollowed)
    }
  }
})
</script>

在组件中，需要定义一个`isFollowed`属性表示是否已经关注，以及一个`follow`事件，用于在点击关注按钮时触发。在`handleFollow`方法中，可以使用`$emit`方法触发`follow`事件，并传递一个布尔值参数表示关注状态的改变。

在父组件中，可以使用`v-model`指令来双向绑定`isFollowed`属性。当关注状态发生改变时，会触发`follow`事件，父组件可以监听该事件并更新`isFollowed`属性的值。示例代码如下：

<template>
  <FollowButton v-model="isFollowed" @follow="handleFollow" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import FollowButton from './FollowButton'

export default defineComponent({
  components: {
    FollowButton
  },
  setup() {
    const isFollowed = ref(false)

    function handleFollow(value: boolean) {
      isFollowed.value = value
      // 发送关注/取消关注的请求
    }

    return {
      isFollowed,
      handleFollow
    }
  }
})
</script>

在父组件中，需要使用`ref`函数定义一个响应式变量`isFollowed`，并在`handleFollow`方法中更新该变量的值。同时，需要在模板中使用`v-model`指令将`isFollowed`属性双向绑定到`FollowButton`组件上。

当用户点击关注按钮时，会触发`FollowButton`组件中的`follow`事件，并传递一个布尔值参数表示关注状态的改变。父组件可以在`handleFollow`方法中监听该事件，并更新`isFollowed`变量的值。同时，在`handleFollow`方法中可以发送关注/取消关注的请求。