面试必问:组件通信

66 阅读1分钟

1、父子组件

prop传值、$emit将值传给父 如果没有加 required:true,那么就算父组件没有给子组件传值,子组件也就是空,不会报错

如果写了type: Array,那么传过来的必须是数组,如果是其他类型就会报错,如果没写type,传什么类型都可以用

如果传给子的可能是数组或者对象,type: [Array, Object]

可以通过ref去调用子组件中方法

2、vuex

strore:存储变量(相当于组件中的data)

getters: state的计算属性,从store中获取数据

mutations: 只能是同步,修改属性 ,commit

actions: 主要用来做异步操作,也可以用来做同步,调API接口, dispatch

modules: 模块化拆分

为什么mutations不处理异步函数?

action可以处理异步函数,是因为在devtools中可以追踪数据变化。 假设mutions内部有异步,那么会带来devtool无法准确追踪state变化,因为多个异步并不知道哪个异步会先执行完。但是话说回来,mutations中有异步,依然可以修改state啊,因为业务中我并不太需要知道devtool是如何追踪state的变化,但是为了遵从规范,所有的异步都在actions中处理,mutations只集中干一件事,直接修改state值。

3、provide inject祖孙组件

需要provide一个对象,因为它不是响应式的,基本数据类型不具有响应特性

如果传的是string,在父中改变了初始传入的值,子孙得不到改变后的值 缺点:

(1)当多个子孙组件同时依赖同一个父组件提供数据时,只要任一组件对数据进行了修改,所有依赖的组件都会受到影响,实际是增加了耦合度 (2)出现问题的时候定位比较困难,不好定位到底是哪一个层级改变了数据

4、事件总线(EventBus)

通信方式:父子、兄弟、跨组件通信 所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件

eventbus在main.js中定义

eventbus.$emit()发送消息

eventbus.$on()接收消息

eventbus.$off()移除事件监听

全局使用:this.$bus.$emit()、this.$bus.$on()

EventbBus之所以能实现全局跨组件通信首选因为它是一个全局对象,可以通过挂在window或prototype上,并且能通过触发事件传参来实现数据的传递。

在小型项目(二三十个页面)中使用起来还是比较友好的,比起vuex要来的简单粗暴一点,因为vuex需要建立mutations、actions,某些逻辑交互甚至需要借助computed+watch来实现,这在小项目中显得比较臃肿。

在大型项目(几百个页面中)使用eventbus不是不行,就是这里面的水很深,eventbus的缺点就是vuex的优点,==缺乏状态管理==。eventbus.$emit()或eventbus.$on()要想知道它们分别在哪里被监听,哪里被触发,全局一搜竟然有好几十处,

5、mixins

当多个组件中的数据或功能相近时,利用mixins将公共部分提取出来,封装、调用

特点:(1)当前组件对mixins属性的修改,其他组件中的不会受影响

(2)如果当前组件有与引入的mixins同名的属性或者方法,如果是data或methods:组件中的会覆盖掉混合对象中的;如果是created、mounted:都调用,mixins中的先执行