Web前端最全vue中组件通信1(props)(1)，互联网大厂100道Web前端面试题助你冲关金三银四

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

二、数据交互部分

数据的交互一般从绑定事件监听开始

比如在提交按钮中添加@click=”add”

即用户发表评论，然后将用户发表的评论显示出来

***这里演示数据的添加，由于只涉及到两个板块，即App与Add组件

1. 由于添加按钮在Add.vue.组件中，因此在Add.vue组件中的提交按钮中添加@click事件监听，如

2.由于数据在哪个组件，更新数据的行为（方法）就应该定义在哪个组件，正如现在，由于数据comments定义在App.vue组件中因此对数据的操作应该在App.vue组件中

因此需要在App.vue中定义相关函数的操作，在通过标签将所定义的函数传给Add，然后再在Add.vue中声明接收即可调用。

① 在App.vue中定义addComment函数如下（用于添加用户输入的评论信息）

② 然后在标签中将这个函数以属性addComment的方式传给Add.vue组件，如下：

③ 在Add.vue组件中使用props进行声明，即接收App.vue传过来的对数据的添加操作

在这里，指定addComment的类型是一个函数

④ 然后即可在Add.vue组件中定义的函数add中通过this调用这个addComment的相关操作，具体如下：

 首先是需要对于输入文本框（用于填写用户名与用户评论）添加v-model指令，用于数据的双向绑定

 在data() 函数中，返回使用v-model双向绑定的数据显示

 然后在按钮所定义的add函数中，首先使用this.name.trim()来获取用户输入的内容，然后判断是否合法，若不合法，则终止操作，如果合法，则将其添加到comments对象中

 由于在App.vue组件中定义的添加信息函数的参数是comments对象，因此需要将用户输入的信息先封装成一个对象的形式，然后再将其传给函数，达到更新数据的效果，如下:

***这里演示数据的删除操作

操作的原理类似于数据的添加，只是这里设计的组件分别有App、List、Item，且三者之间是逐级传递的。

1.首先，由于删除相关标签定义再Item组件中，因此需要在Item组件中的相应标签定义相关的监听事件，如：

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】