首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Search组件：
<template>
<div>
<van-search v-model="keyword" placeholder="请输入关键词" @search="onSearch" />
</div>
</template>
<script>
import { ref } from 'vue';
import { Search } from 'vant';
export default {
components: {
[Search.name]: Search,
},
setup() {
const keyword = ref('');
const onSearch = () => {
console.log('搜索关键词：', keyword.value);
// 在这里可以执行搜索操作，例如发起网络请求等
};
return {
keyword,
onSearch,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的keyword变量，用于存储用户输入的关键词。然后，我们在模板中使用<van-search>标签引入了Vant3的Search组件，并通过v-model将keyword与搜索框的值进行绑定。通过placeholder属性设置搜索框的占位符。
通过上述设置，用户在搜索框中输入关键词时，keyword变量会自动更新，从而获取用户输入的值。同时，通过监听@search事件，可以在用户点击搜索按钮时触发onSearch方法，你可以在这个方法中执行搜索操作，例如发起网络请求等。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5728/Vant