1. 安装 Vant4 和 Vue 3：
确保你已经安装了 Vant4 和 Vue 3，可以使用 npm 或 yarn 安装：
npm install vant@next vue@next --save
# 或
yarn add vant@next vue@next
2. 在你的 Vue 组件中使用组合式 API：
<template>
<div>
<div>
<button @click="increment">增加</button>
<span>{{ count }}</span>
<button @click="decrement">减少</button>
</div>
<div>
<button @click="reset">重置</button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建响应式数据
const count = ref(0);
// 定义组合式 API 中的函数
const increment = () => {
count.value++;
};
const decrement = () => {
count.value--;
};
const reset = () => {
count.value = 0;
};
// 返回组件的属性和函数
return {
count,
increment,
decrement,
reset
};
}
};
</script>
在上述示例中，setup 函数是组合式 API 的入口点。在 setup 函数中，我们使用 ref 创建了一个响应式的 count 变量，并定义了三个函数 increment、decrement 和 reset。这些函数和变量都会被暴露给模板部分使用。
这是一个简单的例子，组合式 API 允许你更好地组织和重用组件的逻辑。在实际项目中，你可以根据需要将相关的逻辑代码组织到不同的函数中，以提高代码的可读性和可维护性。
转载请注明出处：http://www.zyzy.cn/article/detail/5866/Vant