在Vue 3开发中，组件封装是提升代码复用性和可维护性的重要手段。今天，我们就来学习如何借助Vue.js组件封装一个实用的数据筛选器。

创建一个新的Vue 3项目。可以使用Vue CLI快速搭建项目框架。在项目的src/components目录下，新建一个名为FilterComponent.vue的组件文件。这将是我们的数据筛选器组件。

在FilterComponent.vue中，先定义组件的基本结构。<template>标签用于编写组件的模板，也就是用户界面部分。在这里，我们可以添加输入框、下拉菜单等元素来实现筛选条件的输入。例如，添加一个输入框用于按关键词筛选数据：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="输入关键词">
    <!-- 后续可添加更多筛选条件元素，如下拉菜单等 -->
  </div>
</template>

接着，在<script setup>标签中定义组件的逻辑。这里我们定义一个响应式变量searchKeyword来存储用户输入的关键词：

import { ref } from 'vue';

const searchKeyword = ref('');

当用户在输入框中输入内容时，searchKeyword的值会实时更新。接下来，我们要将筛选条件传递给父组件，以便对数据进行实际筛选。可以通过定义一个自定义事件来实现。

const sendFilter = () => {
  // 触发自定义事件，将筛选条件传递出去
  emit('filter', searchKeyword.value);
};

然后在模板中添加一个按钮，点击按钮时触发sendFilter函数：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="输入关键词">
    <button @click="sendFilter">筛选</button>
  </div>
</template>

在父组件中使用这个筛选器组件时，首先引入FilterComponent.vue组件：

<template>
  <div>
    <FilterComponent @filter="applyFilter"></FilterComponent>
    <!-- 展示数据列表 -->
  </div>
</template>

<script setup>
import FilterComponent from './components/FilterComponent.vue';

const dataList = ref([
  { name: '苹果', price: 5 },
  { name: '香蕉', price: 3 },
  // 更多数据
]);

const applyFilter = (keyword) => {
  // 根据关键词对dataList进行筛选
  const filteredData = dataList.value.filter(item => item.name.includes(keyword));
  // 展示筛选后的数据
};
</script>

通过以上步骤，我们成功地在Vue 3中借助组件封装了一个简单的数据筛选器。随着项目的深入，还可以不断扩展筛选器组件的功能，添加更多筛选条件，如日期范围、分类筛选等，从而满足复杂的业务需求。