2024年Web前端最新vue保姆级教程----组件之间的参数传递(1)，2024前端常见面试题分享

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容

📢 CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

文章目录

✨ 前言

✨ 实用示例

1. props和$emit

🔔 props

🔔 $emit

2. $parent 和 $children

🔔 $parent

🔔 $children

3. Provide/Inject

4. Vuex

✨ 结语

---

✨ 前言

随着移动互联网的发展,前端技术也日新月异。如今流行的前端框架层出不穷,从Angular、React到Vue,每个框架都有自己的特色。但是学习任何一种新框架和技术都需要Certain一个过程,那么我们应该如何快速地上手一项新技能呢?

本专栏将以Vue框架为例,分享作者在学习Vue过程中的一些心得与经验。文中将介绍:

• Vue的基本特性与发展历程
• 怎样快速学习Vue的基础语法
• 如何应用Vue开发常见的组件
• 一些提高Vue开发效率的技巧
• Vue生态系统中的常用工具及插件

通过阅读本文,希望可以帮助对Vue感兴趣但还没有实际使用经验的读者,快速地对Vue框架有一个整体的认识,并快速上手Vue进行实际项目的开发。与此同时,也欢迎有Vue使用经验的读者,分享你的学习经验与心得。

让我们开始Vue的学习与探索之旅吧!

✨ 实用示例

在Vue项目中,我们经常需要在组件之间传递数据。组件之间的数据传递主要有以下几种方式:

1. props和$emit

🔔 props

• 在子组件中使用 props 声明需要从父组件接收的数据:

export default {
  props: ['message'] 
}

• 子组件在模板中可以像使用 data 一样使用 props 的数据:

<p>{{ message }}</p>

• 父组件使用 v-bind 向子组件传递 props:

<ChildComponent :message="parentMessage" />

• props 有一些高级特性,如类型检查、默认值等:

props: {
  message: {
    type: String,
    default: 'default value' 
  }
}

🔔 $emit

• 子组件中通过 $emit 触发事件来通知父组件:

this.$emit('someEvent', 1, 2, 3)

• 父组件使用 v-on 监听子组件事件:

<ChildComponent v-on:someEvent="callback" />

• 回调函数接收子组件传递过来的额外参数:

methods: {
  callback(param1, param2, param3) {
    // ......
  }  
}

• 除了数据之外,也可以在 $emit 中传递事件对象:

this.$emit('click', e)

这样 props 和 $emit 就实现了父子组件之间的双向数据传递。可以根据需要灵活使用。

2. $parent 和 $children

🔔 $parent

1、在子组件中可以通过this.$parent访问父组件的实例。

2、子组件可以直接调用父组件的数据或方法:

this.$parent.parentData
this.$parent.parentMethod()

3、父组件也可以通过refs访问子组件实例:

<ChildComponent ref="child"/>

this.$refs.child.childData

4、需要注意$parent/$children时组件间的强耦合关系。

5、不要在模板或样式中直接访问$parent/$children。

🔔 $children

1、在父组件中通过this.$children访问子组件实例数组。

2、示例:

this.$children[0].childMethod()

3、常见场景是父组件遍历子组件:

this.$children.forEach(child => {
  // ...
})

4、$children需要注意子组件的顺序和数量变化。

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中…(img-KsBBsGls-1715437633649)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】