$ npm install vue-bus

import Vue from 'vue';
import VueBus from 'vue-bus';

Vue.use(VueBus);

// ...
created() {
  this.$bus.on('add-todo', this.addTodo);
  this.$bus.once('once', () => console.log('这个监听器只会触发一次'));
},
beforeDestroy() {
  this.$bus.off('add-todo', this.addTodo);
},
methods: {
  addTodo(newTodo) {
    this.todos.push(newTodo);
  }
}

// ...
methods: {
  addTodo() {
    this.$bus.emit('add-todo', { text: this.newTodoText });
    this.$bus.emit('once');
    this.newTodoText = '';
  }
}

=======================================================================

1.组件通讯

父子组件之间传递数据子组件通过props来接受父组件传递的数据,在兄弟组件之间传递数据的话可以使用框架vuex,对于不是庞大的单页面应用就不太适合使用了, vue 官网提供了一种方法叫做 中央事件总线

// 新建一个 Bus.vue文件,new 一个 vue 实例导出
export default new Vue({
    name: 'bus',
    data () {
        return {
            // code
        }
    }
})

// 可以理解为这是一个传话人员

// 新建一个组件 A
<tempalte>
    <button @click="sendMessage"向组件 B 发送数据</button>
</tempalte>
<script>
import Bus from 'Bus.vue'
    export default {
        name: 'componentA',
        data () {
            return {
                msg: 'the message is from componentA'
            }
        },
        methods: {
            sendMessage () {
                // 假设知道组件 B 有个方法叫做 inceptMessage(接收数据的方法)
                // 组件 A对组件 B 说 我要通过 Bus 这个传话员给你传话了,你先告诉我
                // 这么理解,当组件 A 通过 Bus 传话员去触发inceptMessage这个方法的时候,组件 B 是可以感应到组件 A 调用了这个方法的
                Bus.$emit('inceptMessage', this.msg)
                // Bus 通过触发组件 B 的inceptMessage方法将 msg 发送过去了,这个时候组件 B 还不知道组件 A 给它发送了一条数据
            }
        }
    }
</script>

// 新建一个组件 B
<tempalte>
    // 显示组件 A 传过来的数据
    <h1>{{ fromComponentAMsg }}</h1>
</tempalte>
<script>
import Bus from 'Bus.vue'
    export default {
        name: 'componentB',
        data () {
            return {
                fromComponentAMsg: ''
            }
        },
        methods: {

        },
        mounted () {
            // 这个时候组件 B 知道组件 A 给它传了一条数据过来了,于是赶紧叫 Bus 这个传话员把数据告诉它
            // bus 就告诉组件 B, 组件 A 那边通过inceptMessage传过来一条数据叫 msg
            Bus.$on('inceptMessage',(msg) => {
                this.fromComponentAMsg = msg
            })
        }
    }
</script>

2 . 组件前进刷新,后退不刷新

vue 官网给出的一个方法是通过keep-alive将router-view包住就能实现组件不刷新显示原来的数据,但是在组件中一般都是前进更新数据返回的时候不刷新保留原来的数据,增加用户体验,通过搜索发现了一个方法

export default {
    name: 'xxx',
    data () {
        //...
    },
    deactivated () {
     this.$destroy()
   },
   methods: {
    // ...
    }
}

$destroy完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。 

这样就可以重新更新数据了