前端面试题（一）

1、子组件能不能修改父组件传递过来的数据？

①是直接在子组件中通过this.$parent.event来调用父组件的方法。（具体实现是在父组件定义一个修改数据的方法，然后在子组件里定义一个方法，在子组件的方法中通过"this.$parent.父组件方法名"达到调用父组件方法的目的。）

②是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。（具体实现是通过在父组件里面的子组件标签内定义自定义方法"@自定义方法名：父组件的方法名"，子组件中通过"this.$emit('自定义的方法名')"来调用父组件中的方法）

2、swiper获取数据、css都没有问题，但是图片不动，应该怎么解决？

①第一种在数据调用结束后再进行swiper初始化。实现原理，通过vue自带的nextTick方法，它会在数据变化以后，DOM更新以后进行回调函数。把轮播图放在回调里就解决了。

②是加载组件时加v-if判断 原理是通过双向数据绑定，给他绑定一个空数组，判断这个数组如果有数据或者length>1的时候，再渲染。

3、什么是BFC？什么时候触发BFC？

BFC即Block Contexts（块级格式化上下文）是W3C CSS2.1 规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC的触发条件

浮动：float值除none以外的值

定位：position为absolute或fixed

overflow：除了visible以外的值（hidden、auto、scroll）

display：inline-block、table-cell、flex、inline-flex、table-caption

4、px rem em 的区别？

px：固定的像素，不能自适应页面大小.

rem：相对于根元素（根元素是html）.

em：相对于父元素.

5、清除浮动的方式有哪些？最优的是哪一种？

①父级div定义height。

②结尾处加空div标签clear:both。

③父级div定义伪类:after和zoom。  -------比较好

④父级div定义overflow:hidden。

⑤父级div定义overflow:auto。

⑥父级div也浮动，需要定义宽度。

⑦父级div定义display:table。

⑧结尾处加br标签clear:both。