vue3怎么对接口的例子

Vue3中，我们可以使用`setup`函数配合TypeScript或者JavaScript的静态类型系统来直接定义并使用接口。接口在Vue中主要用于描述组件的props、emits、以及自定义的方法等。下面是一个简单的例子：

// 定义一个接口
interface MyComponentProps {
  name: string;
  age: number;
  handleClick: (msg: string) => void;
}

// 在setup函数中声明并使用接口
function setup(props: MyComponentProps) {
  const handleClick = (msg: string) => {
    console.log(`Clicked with message: ${msg}`);
  };

  // 使用接口的属性
  return {
    props,
    methods: { handleClick },
    onMounted() {
      console.log(`Name is ${props.name} and age is ${props.age}`);
    }
  };
}

// 组件模板中引用接口属性
<template>
  <div>
    <h1>{{ name }} 年龄 {{ age }}</h1>
    <button @click="handleClick">点击</button>
  </div>
</template>

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

export default defineComponent({
  setup: setup,
});
</script>

在这个例子中，`MyComponentProps`是我们的接口，它定义了组件接受的属性结构。`setup`函数接收这个接口作为参数，并在返回的对象中暴露给组件使用。