Vue3实现搜索附加的人

在Vue3中实现搜索功能通常涉及组件化和数据绑定。首先，你需要创建一个搜索框组件（SearchBox），用户可以在该组件中输入关键词。然后，你可以在一个列表或网格组件（如`<ul>`、`<v-list>`或`<El表格>`等）中展示数据，并添加一个事件监听器来响应搜索请求。

下面是一个简单的例子：

<!-- SearchBox.vue -->
<template>
  <div @search="handleSearch">
    <input v-model="query" placeholder="请输入搜索关键字...">
    <button @click="submitSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
    };
  },
  methods: {
    handleSearch(query) {
      this.$emit('search', query);
    },
    submitSearch() {
      this.handleSearch(this.query);
    },
  },
};
</script>

在父组件中，例如App.vue，你将这个SearchBox作为子组件引入并处理搜索结果：

<!-- App.vue -->
<template>
  <div>
    <SearchBox @search="displayResults" />
    <ul ref="list">
      <!-- 这里是动态渲染的数据 -->
      <li v-for="(item, index) in filteredItems" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue';

export default {
  components: { SearchBox },
  data() {
    return {
      items: [], // 假设这是原始数据源
      query: '',
      filteredItems: [],
    };
  },
  mounted() {
    this.displayResults(); // 初始加载数据
  },
  methods: {
    displayResults(query) {
      this.filteredItems = this.items.filter(item => item.name.includes(query));
    },
  },
};
</script>

在这个例子中，当用户在SearchBox中输入并提交搜索，`handleSearch`方法会被触发，然后`displayResults`会在父组件中更新显示的列表内容，只包含匹配搜索的关键字的结果。