vue2封装可选项搜索组件
时间: 2024-09-09 21:08:52 浏览: 31
在Vue 2中,封装一个可选项搜索组件通常用于实现用户可以根据输入筛选列表的功能。这个组件可以接受一个数据源数组作为props,并允许传递搜索关键字作为输入。下面是一个简单的步骤说明如何实现:
1. **创建组件**:
首先,创建一个新的Vue组件文件(如`SearchableList.vue`),并导入必要的依赖。
```html
<template>
<div>
<input v-model="searchTerm" placeholder="搜索...">
<ul>
<li v-for="(item, index) in filteredItems" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
},
},
data() {
return {
searchTerm: '',
};
},
computed: {
filteredItems() {
return this.items.filter(item => {
// 这里对item进行搜索关键词匹配处理
return item.toLowerCase().includes(this.searchTerm.toLowerCase());
});
},
},
};
</script>
```
2. **使用组件**:
现在可以在其他地方像这样使用这个组件,并传入需要搜索的数据:
```html
<template>
<div>
<SearchableList :items="dataArray" />
</div>
</template>
<script>
import SearchableList from './SearchableList.vue';
export default {
components: {
SearchableList,
},
data() {
return {
dataArray: [
'苹果',
'香蕉',
'橙子',
... // 更多项
],
};
},
};
</script>
```
阅读全文