需求：首頁選擇一些篩選條件导俘，進入添加頁后再返回榄审，篩選條件初始化了考婴，返回采用的back()無法傳值贩虾，故可采用bus操作。

新建eventBus.js,注冊一個公共bus

import Vue from 'vue'

let eventBus = new Vue({})

export default eventBus

index.vue中各個組件在data中綁定的對象

listQuery: {
  page: 1,
  rows: 20,
  name: '',
  type: '',
  status: '-1',
  project_id: '',
  team_id: '',
  partner_id: '',
  customer_id: '',
  start_time: '',
  end_time: '',
  index_start_time: '',
  index_end_time: '',
  custome_field: ''
},

例如我們進入'添加'頁沥阱，此時先把listhQuery存進query中

this.$router.push({
  path: 'order/add',
  query: {
    listQuery: {
      ...this.listQuery
    }
  }
})

add.vue先進行接受

created() {
  this.query = this.$route.query
  this.initData()
},

add.vue中的返回組件

<back-page :query="query"/>

backPage.vue

<template>
  <div class="back">
    <el-link type="info" @click="backPage()">返回</el-link>
  </div>
</template>

<script>
  import eventBus from '@/helper/eventBus'
  export default {
    name: "BackPage",
    props: [ 'query' ],
    //在destoryed周期中調(diào)用bus缎罢，否則index.vue接收的數(shù)據(jù)變化但視圖未及時更新
    destroyed() {
      eventBus.$emit('query',this.query)
    },
    methods: {
      backPage() {
        this.$router.back();
      }
    },
  }
</script>

<style scoped>
  .back {
    width: 100%;
    padding: 12px 20px;
    background: white;
  }
</style>

最后一步index.vue

beforeMount() {
  this.resetListQuery = { ...this.listQuery }
  //此處進行bus接收賦值操作，注意：一定要在請求數(shù)據(jù)前先賦值，故把fetchData函數(shù)丟在了mounted周期中執(zhí)行
  this.Bus()
},
mounted() {
  this.fetchData()
  this.max_height = window.innerHeight - 70;
},
beforeDestroy() {
  //此處銷毀bus策精，避免this.Bus()執(zhí)行多次影響性能
  eventBus.$off('query')
},
watch: {

},
computed: {

},
methods: {
  Bus() {
    eventBus.$on('query',(data)=> {
      this.listQuery = { ...data.listQuery }
      this.times = [ this.listQuery.start_time, this.listQuery.end_time]
      this.index_times = [ this.listQuery.index_start_time, this.listQuery.index_end_time ]
    })
  },
}