使用vue3+ts做出一个对设备绑定解绑的功能

这里是一份使用Vue 3和TypeScript实现设备绑定解绑功能的代码示例：

<template>
  <div>
    <h2>设备绑定解绑</h2>
    <form @submit.prevent="onSubmit">
      <div class="form-group">
        <label for="deviceId">设备ID:</label>
        <input type="text" id="deviceId" v-model="deviceId" class="form-control" required>
      </div>
      <div class="form-group">
        <label for="userId">用户ID:</label>
        <input type="text" id="userId" v-model="userId" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-primary">{{ binding ? '解绑' : '绑定' }}</button>
    </form>
    <div v-if="message" class="alert alert-info">{{ message }}</div>
  </div>
</template>

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

interface Binding {
  deviceId: string;
  userId: string;
}

export default defineComponent({
  data() {
    return {
      deviceId: '',
      userId: '',
      binding: false,
      message: ''
    }
  },
  methods: {
    async onSubmit() {
      try {
        const binding: Binding = {
          deviceId: this.deviceId,
          userId: this.userId
        };
        if (this.binding) {
          // 发送解绑请求
          await this.unbindDevice(binding);
          this.message = `设备${binding.deviceId}已解绑`;
        } else {
          // 发送绑定请求
          await this.bindDevice(binding);
          this.message = `设备${binding.deviceId}已绑定`;
        }
        this.deviceId = '';
        this.userId = '';
      } catch (error) {
        console.error(error);
        this.message = error.message;
      }
    },
    async bindDevice(binding: Binding) {
      // 发送绑定请求
      // ...
    },
    async unbindDevice(binding: Binding) {
      // 发送解绑请求
      // ...
    }
  }
});
</script>

这个组件包含一个表单，用户可以在表单中输入设备ID和用户ID。当用户点击“绑定”按钮时，组件将发送一个绑定请求，并将消息显示为“设备已绑定”。当用户点击“解绑”按钮时，组件将发送一个解绑请求，并将消息显示为“设备已解绑”。

组件使用了一个名为`Binding`的接口来表示设备绑定和解绑请求中的数据。组件还包含了两个异步方法，`bindDevice`和`unbindDevice`，它们负责发送绑定和解绑请求。这些方法可以根据具体的需求进行实现。