//這是父組件中的部分代碼，父組件向子組件<handle-Employee><handle-Employee>傳遞數(shù)據(jù)（method,dialogFormvisible）
 // 父組件的部分代碼
<!--添加員工模塊-->
   <div class="add">
    <el-button type="primary" icon="edit" @click="handleAdd">新增員工</el-button>
    <handle-Employee :method="method"
     :dialogFormVisible="dialogFormVisible" @close="closeDialog" @getEmployee="getEmployee"></handle-Employee>
   </div>
  </div>
// 父組件的script代碼
 export default {
  data () {
   return {
    method:{handle： 'add‘, title: '增加員工'}
    dialogFormvisible: false
 }
 } 
}

// 子組件中則需要加prop屬性數(shù)據(jù) ，如下所示：
 export default {
   props: [ 'method', 'dialogFormVisible']
 }

//所以只要父組件中的數(shù)據(jù)變化修改，子組件中的數(shù)據(jù)也會跟這修改；

///父組件監(jiān)聽子組件的事件，通過@close="closeDialog"和@getEmployee="getEmployee"來實(shí)現(xiàn)監(jiān)聽；
一旦子組件中的事件close和getEmployee發(fā)生之后，就會觸發(fā)父組件中的事件closeDialog和getEmployee事件。
// 父組件的部分代碼
<div class="add">
  <el-button type="primary" icon="edit" @click="handleAdd">新增員工</el-button>
  <handle-Employee :method="method" :dialogFormVisible="dialogFormVisible" @close="closeDialog" ></handle-Employee>
</div>

//子組件中的事件分發(fā) 
export default {
methods: {
 // 關(guān)閉彈出框
   closeDialog () {
    this.$emit('close', false)  //這里就是直接觸發(fā)子組件的close事件，一旦這個執(zhí)行，父組件中的對應(yīng)方法就會執(zhí)行。
   }
}
}
// 當(dāng)那邊觸發(fā)關(guān)閉事件的時候，這邊的顯示值就要關(guān)閉，那邊會傳過來一個false

// 父組件的事件
export default {
methods: {
 // 當(dāng)那邊觸發(fā)關(guān)閉事件的時候，這邊的顯示值就要關(guān)閉，那邊會傳過來一個false
  closeDialog (val) {
    this.dialogFormVisible = val
   }
}
}

//bus.js，注冊Bus
import Vue from 'vue'
export default new Vue()

<template>
 <div class="add-task" :class="{'ishide':isAdding}" @click="addtask()">
  <i class="fa fa-plus-circle" aria-hidden="true"></i>
  添加任務(wù)
 </div>
</template>
<script>
 import Bus from '@/bus'
 export default {
 methods: {
 props: ['index'],
  data () {
   return {
    isAdding: false
   }
  },
   addtask () {
    this.isAdding = true
    Bus.$emit('adding-task', this.isAdding, this.index) // 這里觸發(fā)的事件是'adding-task'，
    傳遞了兩個參數(shù)，分別是this.isAdding和this.index
    this.$emit('addtask')
   }
  }
 }

// 模板中的代碼就不展示了。
主要展示的是script中的代碼
export default{
data() // 這里的數(shù)據(jù)也不一一顯示啦；
created () {
// 這里使用on監(jiān)聽了adding-task事件，接收到兩個參數(shù)。所以一旦上面的組件中的adding-task事件觸發(fā)，這里就會監(jiān)聽到。
   Bus.$on('adding-task', (state, index) => {
    if (this.index === index) {
     this.isShow = state
    }
   })
  }
}

//這里我會在每一次組件emit的時候傳遞一個index的值，另外一個組件on之后接受參數(shù)，會先判斷該index是不是與自己的index相等，如果相等才執(zhí)行相應(yīng)的數(shù)據(jù)改變操作。
 Bus.$on('adding-task', (state, index) => {
    if (this.index === index) {
     this.isShow = state
    }