vue通过$emit传值的方式实现简单的搜索功能

vue通过$emit传值的方式实现简单的搜索功能

1、首先先项目中创建一个文件，该文件随便起名sousuo.vue
html代码：

<template>
  <div id="sousuo">
    <div class="t-sousuo" @keyup.enter="searchCont">
        <i class="el-icon-search"></i>
        <div class="t-sousuo-xiao" >
            <input type="text" placeholder="请输入内容" ref="input" v-model="search">
        </div>
        <el-button @click="searchCont" type="primary">搜索</el-button>
    </div>
  </div>
</template>

中央事件的创建以及引入（在assets文件下创建一个名为：Bus.vue的文件）
在Bus.vue文件里面写这两句话：

import Vue from 'vue';
export default new Vue();

然后在main.js把Bus.vue注册成全局组件：

import Bus from './assets/Bus'
Vue.prototype.$bus = Bus

js代码：

<script>
export default {
  name:"Sousuo",
  data(){
    return{
      search: "",
    }
  },
  methods:{
    // 搜索
    searchCont(){
        this.$bus.$emit('sousuo-data',this.search)//把数据存在中央事件，Bus.js文件中
    }
  },
  mounted() {//input焦点
    this.$refs['input'].focus()
  }
}
</script>

2、在项目中创建一个文件，该文件随便起名seek.vue
html部分：v-for遍历listSearch数组，获取数据，以下只是个列子，具体看自己的项目要求

<template>
  <div id="conter">
    <div class="content" v-for="(item,index) in listSearch" :key="index">
      {{item.name}}
    </div>
  </div>
</template>

js部分：

<script>
export default {
  name: "Conter",
  data() {
    return {
      texts:[{name:"张三"},{name:"李四"},{name:"五万"},{name:"赵六"}],// 这个数组是从后台获取过来的数据
      listSearch:[{name:"张三"},{name:"李四"},{name:"五万"},{name:"赵六"}]// 这个数组也是从后台获取过来的数据，并且输入搜索内容的时候更新遍历到html上
    }
  },
  created () {
    this.$bus.$on('sousuo-data',(message)=>{//从中央事件获取数据过来
      this.listSearch = this.texts.filter((text) => {// 通过filter过滤新数组里面的是否有和源数组相等的，用index()来判断
          return text.name.indexOf(message) > -1;//这里的name是你要比较和输入的字是否匹配的，对应上面的数组的name，搜索的内容不同，名字也不同
      });
    })
  }
}
</script>