2024年前端最全Vue组件，全网独家首发

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

效果截图：

通过上面的例子，我们可以总结出全局组件的使用步骤：

1. 使用vue.component()注册组件，需要提供2个参数：组件的标签名和组件构造器。

2. vue.component()内部会调用组件构造器，创建一个组件实例。

3. 将组建挂载到某个vue实例下。

注意：一个组件的template部分，必须要包裹在一个根容器中。

因为组件是可复用的vue实例，所以它们也能有data、computed、watch、methods以及生命周期钩子等。

样例代码：

效果截图：

上面代码中有两个注意事项：

1. 组件模板的内容，可以写在一对反引号中（``），这样就可以不使用字符串拼接的形式了。

2. 一个组件的data选项必须是一个函数，该函数返回一个对象。

局部组件

---

如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。 因此我们可以将上面的全局组件改为局部组件。

样例代码：

效果截图：

组件模板

---

如果组件中的template内容过多，那么可以使用组件模板来声明template中的内容。

样例代码：

我是局部组件

<button @click=“add”>加

{{num}}

效果截图：

父子组件

==============================================================

当我们继续在组件中写组件，形成组件嵌套的时候，就是我们所说的父子组件了。

样例代码：

我是父组件

效果截图：

组件之间的通信

=================================================================

组件与组件之间是可以互相通信的。包括父子组件之间、兄弟组件之间等等，都可以互相通信。 下面只讨论父子组件之间通信问题。

子组件获取父组件数据

---

在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据的。为此，vue给我们提供了一个数据传递的选项prop，用来将父组件的数据传递给子组件。具体使用如下：

样例代码：

hello {{msg}}