Web前端最全vue中组件通信1(props)，2024年最新面试你经历过最困难的事情

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

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

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

***这里演示数据的添加，由于只涉及到两个板块，即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组件中的相应标签定义相关的监听事件，如：

2.由于删除的时候也是需要更新数据，同理于addComment，需要在App.vue组件中定义相关的删除数据操作，然后再将该操作函数传回给Item.vue组件以调用**（只是此时的回传方式要以List.vue组件为中间体）**

①在App.vue组件中定义的deleteComment函数如下，（这里的函数名要以Item中props接收的属性名一致）

在这里，所用的splice函数以数组下标删除信息，每次删除一条数据

②然后通过在App.vue组件中的标签将这个函数首先以deleteComment属性传给List，List再将之传给Item，Item再直接调用实现

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

orums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-VDymJsBs-1715867228215)]

[外链图片转存中…(img-pWD5Epd4-1715867228215)]