前情提要：在大概12月份投递并面试的。

1. 盒子模型

盒子模型包括：contetn padding border margin

盒子模型示意图

盒子模型的margin重叠问题：提问：如果两个div盒子，padding border margin 都为10px，都使用float布局，那么两个盒子的content之间相距多少px？

答：60px；

1.1 margin 折叠的情况与解决方法

1.1.1 折叠的三种情况

1. 相邻元素间

2. 父元素与其第一个或最后一个子元素之间

3. 空的块级元素

如果一个块级元素中不包含任何内容，并且在其margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height 将其分开，该空白元素的上下外边距会折叠

1.1.2 折叠的三个必要条件

1. 两个/多个

2. 毗邻：两者位置相邻

3. 垂直方向：只有垂直方向的margin才会折叠。水平的margin是不会折叠的。

1.1.3 解决办法

1. inline-block、浮动元素、绝对定位元素的margin不会和垂直方向上其他元素的margin折叠。（上下相邻的元素）

2. 创建了BFC的元素，不会和子元素发生margin折叠（注意：是子元素。如果两个上下相邻的元素设置BFC，那么还是会发生折叠）

2. 数组的一些方法

常规数组操作

push pop shift unshift

ES6新方法

forEach filter induce include map every some indexof lastIndexof concat slice

3. 组件通信的方法

3.1 父子组件的通信

3.2 vuex

3.3 localstorage

3.4 通过一个空的vue实例作为事件中心

用它来触发事件和监听事件，包括父子、兄弟、跨级。

var Event=new Vue();

Event.$emit(事件名,数据);

Event.$on(事件名,data => {});

例如要实现 A 向 B 中传递data，那么可以先构造一个空的vue实例Event。在A中的methods中调用：

Event.$emit('send-data', this.data)

在B中就可以在mounted中调用：在模块编译完成后执行

Event.$on('send-data', data = > {

this.data = data; //把data放在B中了

})

3.5 provide indect

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。

provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

// A.vue

export default {

provide: {

name: '浪里行舟'

}

}

// B.vue

export default {

    inject: ['name'],

    mounted () {         console.log(this.name); // 浪里行舟

    }

}

上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是浪里行舟。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的

3.4 provide 与 inject 怎么实现数据响应式

一般来说，有两种办法：

3.4.1 provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods

a组件的provide

3.4.2 使用 2.6 最新 API Vue.observable 优化响应式 provide(推荐)

a组件的provide 2

b组件的inject

3.5 $parent / $children与 ref

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children：访问父 / 子实例

$ref访问组件实例

喜马拉雅前端实习面经[margin折叠、组件通信]