在VUE中使用TS 如何定义方法

在 Vue 中使用 TypeScript 定义方法，可以通过在 `methods` 中声明方法名称和类型来实现。下面是一个例子：

<template>
  <div>{{ message }}</div>
</template>

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

export default defineComponent({
  data() {
    return {
      message: 'Hello world'
    }
  },
  methods: {
    greet(name: string) {
      this.message = `Hello, ${name}!`
    }
  }
})
</script>

在上面的代码中，我们使用 `defineComponent` 函数定义了一个组件，并使用 `methods` 属性来声明了一个名为 `greet` 的方法，它接受一个名为 `name` 的字符串类型的参数，并且没有返回值。在方法内部，我们可以像普通的 JavaScript 代码一样编写逻辑，访问组件的状态和属性。

需要注意的是，如果在模板中使用了 `this` 访问方法，那么需要在组件中使用 `methods` 属性来声明方法。如果只是在组件内部使用，可以直接在 `setup()` 函数中编写方法。

<template>
  <div>{{ message }}</div>
</template>

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

const message = ref('Hello world')

function greet(name: string) {
  message.value = `Hello, ${name}!`
}
</script>

在上面的代码中，我们使用 `setup()` 函数来定义组件的状态和方法，其中 `greet` 方法接受一个名为 `name` 的字符串类型的参数，并且没有返回值。在方法内部，我们可以通过 `ref` 函数创建响应式数据，并使用 `.value` 属性来访问和修改数据。