vant ui,vant dialog,vant 教程,vant常用组件,vant组件源码,vant组件官网
Vant3 是一个基于 Vue3 的 UI 组件库，其中包含了许多常用的 UI 组件。Vant3 中的组合式 API 是一种全新的组件编写方式，它可以更灵活地组合和复用逻辑。

在组合式 API 中，一个组件可以由一个或多个功能函数组成，这些函数可以接收传入的参数并返回相关的响应式数据、计算属性、方法等。这种方式使得组件的逻辑可以更加清晰明了，并且可以更好地实现逻辑复用。

以下是一个简单的示例，展示了如何使用 Vant3 中的组合式 API 编写一个按钮组件：

html
<template>
<button :class="className" @click="onClick">
{{ text }}
</button>
</template>

<script>
import { ref, computed } from 'vue';
import { useProps } from 'vant';

export default {
setup(props, { emit }) {
const { size, type, text } = useProps();
const className = computed(() => btn-${type} btn-${size});

function onClick() {
emit('click');
}

return {
text,
className,
onClick,
};
},
};
</script>


在上面的代码中，我们通过 useProps 函数来获取组件的 props，然后根据这些 props 计算出相应的类名和点击事件处理函数。最终返回一个包含这些值的对象，在模板中使用即可。

这个示例只是一个简单的演示，实际上 Vant3 中的组合式 API 还有很多更加强大和复杂的用法。通过使用组合式 API，我们可以更加灵活地编写组件，提高组件的可复用性和扩展性。