说一说组件通信的方式？

得分点

父子通信、自定义属性、props、on、VueX

参考答案

标准回答

Vue组件的通信方式分为两大类，一类是父子组件通信，另一类是任何关系类型组件通信（父子、兄弟、非兄弟）

父子组件的通信方式：

• 父给子传递数据，通过给子组件添加自定义属性，比如：<List :list="list"/>，list是父组件给子组件传递的数据。子获取父的数据，在子组件中使用props属性获取

• 子给父传递数据，通过给子组件传递父组件的方法，子组件调用父组件的方法传递数据，比如：<List @delete="deleteHandler"/> ,deleteHandler就是父组件的函数，在子组件中通过this.$emit('方法名',参数)，调用父组件的方法，并把数据传递到父组件。

• props是只读，不可以被修改，所有被修改都会失效和被警告

任何关系类型组件通信（父子、兄弟、非兄弟）方式：

EventBus：

使用方法是创建一个新的Vue实例，需要通信的组件都引入该Vue实例，传递数据的组件使用` event.on('名称',方法)`接收数据。

VueX：

集中管理项目公共数据，Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

加分回答

EventBus的优缺点，缺点vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。同时如果页面中有反复操作的业务，EventBus在监听的时候就会触发很多次，需要好好处理EventBus在项目中的关系。在vue页面销毁时，同时移除EventBus事件监听。优点，解决了多层组件之间繁琐的事件传播，使用原理十分简单，代码量少。适合业简单，组件传递数据较少的项目，大型项目业务复杂的还是尽量使用VueX

延伸阅读

EventBus使用

创建Vue实例

import Vue from 'vue'
export default new Vue()

发送数据

import event from './event'
export default {
    data() {
        return {
            title: ''
        }
    },
    methods: {
        addTitle() {
            // 调用自定义事件
            event.$emit('onAddTitle', this.title)
        }
    }
}

接收数据

import event from './event'
export default {
    mounted() {
        // 绑定自定义事件
        event.$on('onAddTitle', this.addTitleHandler)
    },
    beforeDestroy() {
        // 及时销毁，否则可能造成内存泄露
        event.$off('onAddTitle', this.addTitleHandler)
    }
}