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

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