Vue2.0组件实现动态搜索引擎

Vue2.0组件实现动态搜索引擎的实现思路如下：

1. 创建一个搜索框组件，用于接收用户输入的关键字。

2. 创建一个数据列表组件，用于展示搜索结果。

3. 在搜索框组件中，监听用户输入关键字的事件，并在输入框中实时显示用户输入的关键字。

4. 将用户输入的关键字传递给数据列表组件，用于筛选数据列表中符合关键字的数据。

5. 在数据列表组件中，根据传递过来的关键字，筛选出符合条件的数据，并展示在页面上。

6. 如果搜索结果为空，展示提示信息。

7. 可以设置搜索框的debounce，防止频繁请求接口，影响用户体验。

具体实现代码如下：

搜索框组件：

<template>
  <div>
    <input type="text" v-model="keyword" @input="handleInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    handleInput() {
      this.$emit('search', this.keyword)
    }
  }
}
</script>

数据列表组件：

<template>
  <div>
    <ul>
      <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="filteredData.length === 0">暂无数据</div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      keyword: ''
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => item.name.includes(this.keyword))
    }
  },
  methods: {
    handleSearch(keyword) {
      this.keyword = keyword
    }
  },
  mounted() {
    this.$on('search', this.handleSearch)
  }
}
</script>

使用：

<template>
  <div>
    <search-box @search="handleSearch" />
    <data-list :data="data" />
  </div>
</template>

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

export default {
  components: {
    SearchBox,
    DataList
  },
  data() {
    return {
      data: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'cherry' },
        { id: 4, name: 'durian' },
        { id: 5, name: 'elderberry' }
      ]
    }
  },
  methods: {
    handleSearch(keyword) {
      // 根据关键字请求接口，获取数据
      // ...
    }
  }
}
</script>