当前位置：首页 > news >正文

learn-(Uni-app)输入框u-search父子组件与input输入框(防抖与搜索触发)

news 2025/7/7 12:24:36

1.父子组件u-search

（1）父组件

<!-- 父组件 -->
<template>
<div><searchBar @change="change" @search="search"></searchBar> 
</div>
</template>
<script>
// 子组件搜索
import searchBar from "@/components/searchBar.vue";
export default {data() {return {pageSize: 10, //每页条数pages: 1, //当前页数pageCount: 0, //总页数timer: null, //函数防抖定时器searchName: "", //搜索名称dataList: [], //数据};},created() {this.init();},components: { searchBar },methods: {// 初始化执行init() {this.getData()},// 输入框值发生变化时触发change(e) {this.searchName = e;//输入框值赋值// 防抖处理 防止输入框频繁触发请求clearTimeout(this.timer);this.timer = setTimeout(() => {this.pages = 1; //当前页数this.pageCount = 0; //总页数this.init();//初始化方法}, 1000);},// 确定搜索时触发，回车键，手机键盘右下角的"搜索"键时触发search(e) {this.searchName = e;this.pages = 1; //当前页数this.pageCount = 0; //总页数this.init();},// 获取讲师培训数据getData() {let params = {queryData: {pageNo: this.pages,pageSize: this.pageSize,sortField: "",sortOrder: "asc",params: {course_Name: this.searchName,},},};getDataApi.getData(params).then((res) => {this.dataList = res.result.data;}).catch((e) => {});},},
};
</script>
<style lang="less" scoped></style>

（2）子组件

<!-- 子组件-搜索 -->
<template><div><u-search placeholder="请输入" :showAction="false" v-model="value" @change="change" @search="search"></u-search></div>
</template>
<script>
export default {data() {return {value: "", //搜索内容};},methods: {// 输入框值变化时触发change() {this.$emit("change", this.value);},// 确定搜索时触发，回车键，手机键盘右下角的"搜索"键时触发search() {this.$emit("search", this.value);},},
};
</script>
<style lang="less" scoped></style>

2.非父子组件input输入框

代码如下

<template><div><input type="text" @input="change" /></div>
</template>
<script>
export default {data() {return {courseName: '',pages: 1,pageCount: 0,timer: null};},methods: {change(e) {this.courseName = e.target.value;clearTimeout(this.timer);this.timer = setTimeout(() => {this.pages = 1;this.pageCount = 0;this.init();}, 500);},init() {// 数据初始化逻辑}}
};
</script>

用户在输入框中输入内容时，change方法会被触发，进行防抖处理，并在延迟结束后调用init方法进行数据初始化。

3.setTimeout()和setInterval()

js-setTimeout()和setInterval()同样执行倒数100秒区别（setTimeout精度更高）_js settimeout回调和setinterval谁的效率高-CSDN博客文章浏览阅读304次。setTimeout()和setInterval()同样执行倒数100秒区别（setTimeout精度更高）_js settimeout回调和setinterval谁的效率高https://blog.csdn.net/2301_76671906/article/details/144141581?fromshare=blogdetail&sharetype=blogdetail&sharerId=144141581&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link