中央事件总线的一个简单应用

这个案例是个简单的简历筛选的一个小demo，通过点击上方li列表下方的基本信息及个人经历列表进行自动去渲染。这里我用到了中央事件总线，进行组件消息的发布与接收。样式部分引入了ElementUi。

1. 先进行组件划分
   这里我是将三部分划分为单独的组件
   
2. 在li里面添加点击事件，并将数据发送出去

 <ul class="ul_userinfor">
    <li class="usercard"  v-for="(item,index) in this.userdata.slice(0,6)"  :key="index"  @click="aba(item,index)">
         <img :src="item.image">
         <div>
             <p class="name">{{item.name}}</p>
             <p class="gender">{{item.gender}}</p>
             <p class="post"><span>申请职位：</span>{{item.post}}</p>
             <p class="school"><span>毕业学校：</span>{{item.school}}</p>
             <p class="tel"><span>联系方式：</span>{{item.tel}}</p>
         </div>
     </li>
 </ul>
<script>
import userdata from '../assets/json/staff.json'
import Uinformation from './Uinformation'
import UserTable from './UserTable'
import Footer from './Footer'
import eventBus from '../assets/eventBus.js'
export default {
created() {
    this.userdata = userdata.Staff
    console.log(this.userdata)
    this.userdata.forEach(v =>{
        v.image = require("../../src/assets/img/"+ v.image)
    })
},
 data(){
     return{
        inputvalue:'',
        userdata:'',
        // image:require('../../src/assets/img/1.png'),
        active:'0',
     }
 },
 methods: {
     aba(item,index){
        console.log(item)
        eventBus.$emit("infor",item)  //将数据发送出去
        this.active = index
    },

3.其他组件内接收数据并展示：

<template>
  <div class="userall">
      <header>
          <img src="../../public/logo.png">
           <el-input
           class="header_input"
                placeholder="请输入内容"
                v-model="inputvalue"
                >
                 <i slot="suffix" class="el-input__icon el-icon-search" @click="search()"></i>
            </el-input>
      </header>
      <div class="userlist"  >
          <ul class="ul_userinfor">
              <li class="usercard"  v-for="(item,index) in this.userdata.slice(0,6)"  :key="index"  @click="aba(item,index)">
                  <img :src="item.image">
                  <div>
                      <p class="name">{{item.name}}</p>
                      <p class="gender">{{item.gender}}</p>
                      <p class="post"><span>申请职位：</span>{{item.post}}</p>
                      <p class="school"><span>毕业学校：</span>{{item.school}}</p>
                      <p class="tel"><span>联系方式：</span>{{item.tel}}</p>
                  </div>
              </li>
          </ul>
          <ul class="ul_userinfor">
              <li class="usercard"  v-for="(item,index) in this.userdata.slice(6,12)" :key="index"  @click="aba(item,index)">
                  <img :src="item.image">
                  <div>
                      <p class="name">{{item.name}}</p>
                      <p class="gender">{{item.gender}}</p>
                      <p class="post"><span>申请职位：</span>{{item.post}}</p>
                      <p class="school"><span>毕业学校：</span>{{item.school}}</p>
                      <p class="tel"><span>联系方式：</span>{{item.tel}}</p>
                  </div>
              </li>
          </ul>
          <ul class="ul_userinfor">
              <li class="usercard"  v-for="(item,index) in this.userdata.slice(12,18)" :key="index"  @click="aba(item,index)">
                  <img :src="item.image">
                  <div>
                      <p class="name">{{item.name}}</p>
                      <p class="gender">{{item.gender}}</p>
                      <p class="post"><span>申请职位：</span>{{item.post}}</p>
                      <p class="school"><span>毕业学校：</span>{{item.school}}</p>
                      <p class="tel"><span>联系方式：</span>{{item.tel}}</p>
                  </div>
              </li>
          </ul>
        
          
      </div>
      <Uinformation ></Uinformation>
      <UserTable></UserTable>
      <Footer></Footer>
  </div>
</template>


<script>
import userdata from '../assets/json/staff.json'
import Uinformation from './Uinformation'
import UserTable from './UserTable'
import Footer from './Footer'
import eventBus from '../assets/eventBus.js'
export default {
created() {
    this.userdata = userdata.Staff
    console.log(this.userdata)
    this.userdata.forEach(v =>{
        v.image = require("../../src/assets/img/"+ v.image)
    })
},
 data(){
     return{
        inputvalue:'',
        userdata:'',
        // image:require('../../src/assets/img/1.png'),
        active:'0',
     }
 },
 methods: {
     aba(item,index){
        console.log(item)
        eventBus.$emit("infor",item)
        this.active = index
    },
    search(){
        let search = this.inputvalue
        let newListData = []; 
        if(search){
            this.userdata.filter(item=>{
                if(item.name == search){
                    newListData.push(item)
                     this.userdata = newListData
                }
            })
        }else{
            this.$message({
                message: '您未输入姓名',
                type: 'warning'
            });
            this.userdata = userdata.Staff
        }
    }
 },
 components:{
     Uinformation,
     UserTable,
     Footer
 }

};
</script>

<style scoped>
header {
  width: 100%;
  height:78px;
  background-color: #518fce;
  display: flex;
  position: relative;
}
header .header_input{
    width: 300px;
    float: right;
    position: absolute;
    right: 200px;
    top: 20%;
}
.userall{
    position: relative;
}
.userlist{
    width: 100%;
    height: 590px;
    overflow-x: scroll; 
}
.ul_userinfor{
    padding: 20px;
    display: flex;
}
.usercard{
    /* width: 500px; */
    height: 126px;
    display: flex;
    background-image:linear-gradient(#FEFEFE,#E5E5E5);
    padding: 10px;
    margin-right: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #888888;
    cursor: pointer;
}
.usercard img{
    width: 100px;
    height: 100px;
    border: 3px solid pink;
    border-radius: 5px;
    margin: 12px;
}
.usercard div{
    width: 170px;
}
.usercard p{
    margin-bottom: 4px;
}
.gender,.post,.school,.tel{
    font-size: 14px;
    color: gray;
}
.active {
   height: 126px;
    display: flex;
     background-image:linear-gradient(#FCE486,#E5E5E5);
    padding: 10px;
    margin-right: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #888888;
 }


</style>