封装搜索组件

子组件的代码：

<template>
  <div>
    <input
      type="text"
      v-model="dd"
      @keydown.enter="chui"
      @keydown.delete="del"
      @keydown.up="up"
      @keydown.down="down"
    />
    <div v-for="(item,key) in chu" :key="key">
      <p v-if="flog" :class="{p:index==key}">{{item}}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      dd: "",
      chu: [],
      flog: true,
      index: -1
    };
  },
  methods: {
    up() {   //按下上键
      if (this.index == -1 || this.index == 0) {
        this.index = this.chu.length - 1;
      } else {
        this.index--;
      }
      this.dd = this.chu[this.index]; 
    },
    down() {//按下下键
      if (this.index < this.chu.length - 1) {
        this.index++;
      } else {
        this.index = 0;
      }
      this.dd = this.chu[this.index];  //让input框中的数据和列表中的数据一样
    },
    del() {
      this.flog = false;
    },
    chui() {
      var obj = [];
      this.list.forEach(itme => {
        if (itme.includes(this.dd)) {
          obj.push(itme);
        }
      });
      console.log(obj);
      this.chu = obj;
    }
  }
};
</script>
<style lang="scss">
.p {
  background: #ccc;
}
</style>

父组件的代码：

  <search :list="list"></search>//传输数据
  import search from "./views/search";