Vue3 如何让代码变得清新优雅，代码洁癖患者进！（1）-526互联

继续上上上上...上一篇列表的批量操作组件封装 + 权限，如何更优雅的实现呢？Vue3，赞继续谈一下，如何优雅封装页面上的组件。
页面上的组件有很多种，最让人头疼的是弹窗表单组件。

? 在小小的键盘上呀，敲呀敲呀敲，敲完了列表敲操作敲完了操作敲搜索敲完了搜索敲弹窗敲完了弹窗敲表单，这小小的代码一点一点加，这层层的逻辑一点一点挖。

页面代码结构
列表页面结构：

搜索框（也许没有）
批量操作按钮（也许没有）
列表（包括数据操作按钮，也许没有）
分页（也许没有）
弹窗（也许没有）

除了列表以外，其他都可以单独做个组件，这样让页面更加整洁，逻辑更加清晰，维护起来方便。

本人废话很少，直接上代码：

来啦来啦，代码来啦：

将搜索功能单独封装成组件，
如果你想问这又是何必呢？我告诉你，未经他人苦莫劝他人善！
就是要封装，不想看见一坨一坨的代码，
上菜 search.vue：

<template>
    <div class="filter-container">
        <!-- 搜索 -->
        <el-form :model="form" ref="queryFormRef" :inline="true" v-show="showSearch">
            <!-- 这里是搜索条件 -->
            <el-form-item>
                <el-select v-model="form.category" clearable placeholder="请选择产品分类">
                    <el-option v-for="item in dicts.product_category" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="form.status" clearable placeholder="请选择发布状态">
                    <el-option v-for="item in dicts.demand_status" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="form.name" clearable placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="search">搜索</el-button>
                <el-button icon="Refresh" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup name="ProductSearch">
const props = defineProps(['showSearch', 'dicts'])
const emits = defineEmits(['search'])
// 使用路由
const router = useRouter();
const route = useRoute();
// 列表 ref
const queryFormRef = ref(null)
<!-- 初始值获取 query 获取，这样刷新浏览器依然可以保留上一次的数据，更多详情看后续-->
const form = ref({ // 查询条件
    name: route.query.name, // 产品名称
    category: route.query.category, // 产品分类
    status: route.query.status,// 发布状态
    dateRange:route.query.dateRange || []
})
// 设置query
const setQueryData = (data) => {
    let keysArray = Object.keys(data);
    for (const key in form.value) {
        if (keysArray.includes(key)) {
            form.value[key] = data[key];
        } else {
            form.value[key] = undefined
        }
    }
};
// 重置表单
const reset =()=>{
    setQueryData({ dateRange : [] })
    emits('search')
}
// 搜索
const search =()=>{
    emits('search')
}
defineExpose({
    setQueryData,
    form
})
</script>

<style lang="scss" scoped></style>