前端面试总结（二）

1.如何实现vue组件通信

vue组件通信的三种情况

　　父子通信

　　兄嘚通信

　　爷孙通信

父子通信：

　　方法一： props/$emit

　　父组件使用prop向子组件传递数据，子组件通过事件香父组件发送消息（v-on绑定事件）

　　接下来我们通过一个例子，说明父组件如何向子组件传递值，在子组件list.vue中如何获取父组件的数据list:['Visiliki','X','Emily']

　　父组件：

 1 
 7 

　　子组件向父组件传值(通过事件形式)

　　接下来我们通过一个例子，说明子组件如何向父组件传递值：

　　当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子组件向父组件传值”。

　　实现子组件向父组件值的传递

　　子组件：

 1 
 7  

　　父组件：

 1 
 8 

　　方法二： $emit/$oon

　　这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件。

　　巧妙而轻量的实现了任何组件间的通信，包括父子，兄嘚，跨级。

　　当我们的项目比较大时，可以选择更好的状态管理解决方案Vuex

　　具体实现方式：

1 var Event = new Vue();
2 Event.$emit(事件名,数据);
3 Event.$on(事件名,data => {})

 　　举个例子：

　　假设兄嘚组件有三个，分别是ABC组件，C组件如何获取A或者B组件的数据

 1 

 2         
 3         
 4         
 5     
 6     
12     
18     
23     

　　$ON监听了自定义事件data-a和data-b,因为有时会不确定何时会触发事件，一般在mounted或者created钩子中监听。

　　方法三 Vuex

　　简要介绍vuex原理

　　Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行。

　　Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作（常见于调用接口异步获取更新数据）或者批量的同步操作需要走Action，但是Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。