vue3+ts点击按钮获取输入框内容

首先在 Vue3 中使用 TypeScript，需要先安装 `@vue/cli-plugin-typescript` 插件。具体操作可以参考 Vue3 官方文档。

接着，在组件的 `<script>` 标签中，定义一个 `data` 属性来存储输入框的内容：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const inputText = ref('');

    const handleClick = () => {
      console.log(inputText.value);
    };

    return {
      inputText,
      handleClick,
    };
  },
});

这里使用了 `ref` 来创建响应式的变量 `inputText`，并将其初始值设置为空字符串。

在模板中，可以通过 `v-model` 指令将输入框与 `inputText` 双向绑定：

<template>
  <div>
    <input type="text" v-model="inputText" />
    <button @click="handleClick">点击</button>
  </div>
</template>

这样，每次点击按钮时，就可以通过 `inputText.value` 获取到输入框的内容。