vue中组件间有哪些通信方式?

props：通过props接受父级传递的数据

$emit：子组建通过$emit()触发父级的方法通信；

$parent和$children: 通过$parent和$children也访问组件的实例，进行数据的通信；

provide/inject: vue2.2中新增api，父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量；

ref：如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据；

eventBus.$on/eventBus.$emit: 实例的方法/事件，监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

import Vue from 'vue'
export const EventBus = new Vue()

//comp 发送
export default {
    ....
    methods: {
        handleClick: (){
            EventBus.$emit('add', 1)
        }
    }
}
//comp 接受
export default {
    ....
    mounted() {
           EventBus.$on('add', function(val){
            console.log(val);
        })
    }
}

vuex: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

$attrs / $listeners: 在vue2.4中，引入了$attrs 和$listeners ， 新增了inheritAttrs 选项。在版本2.4以前，默认情况下,父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)，将会“回退”且作为普通的HTML特性应用在子组件的根元素上。

总结：

1.vue 中组件间有哪些通信方式?

父子组件通信: props; $parent/$children; provide/inject; ref; $attrs/$listeners;

兄弟组件通信: eventBus; vuex;

跨级通信: eventBus； Vuex； provide / inject; 、$attrs / $listeners;

2.vue 中 v-show 和 v-if 的区别是什么？

v-show: 根据表达式之真假值，切换元素的 display CSS property

v-if: 根据表达式的值的 真值 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

3.keep-alive 组件有什么作用？

主要用于保留组件的状态或避免重新渲染。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。