Vue学习笔记（二）

非父子组件之间通信

eventBus方式

需求：

有页面如下，实现在add-view组件中添加成功之后，v-list组件中数据刷新：

<div id="app">
    <add-view></add-view>
    <v-list></v-list>
</div>

组件<add-view>

<form>
    <!--something-->
    <button @click="add">add</button>
</form>

组件<v-list>

<ul v-for="list">...</ul>

实现：

1、在根节点下初始化一个空的vue对象作为事件中心：

new Vue({
  el: '#app',
  router,
  data: {
    eventBus: new Vue()
  }
})

2、在组件<v-list> 中使用eventBus注册事件

export default {
    mounted() {
        this.$root.eventBus.$on('getList', function() {
            this.getList() //请求数据
        }.bind(this))
    },
} 

3、在组件<add-view> 触发事件

import EventBus from './EventBus'
export default {
    methods: {
        add: function () {
            //.....some codes
            // 添加完成后触发请求数据
            this.$root.eventBus.$emit('getList')
        }
    }
}