【Vue(1)，Java多线程面试总结

*   [组件数据](about:blank#_66)

*   [父子组件的通信](about:blank#_75)

*   *   [父->子：props](about:blank#props_80)

    *   [子->父：$emit()](about:blank#emit_106)

*   [父子组件的访问方式](about:blank#_114)

*   *   [$children](about:blank#children_119)

    *   [$refs](about:blank#refs_124)

    *   [$parents](about:blank#parents_134)

*   [非父子组件通信](about:blank#_143)

*   [插槽 slot](about:blank#_slot_152)

*   *   [编译作用域](about:blank#_153)

    *   [slot 相关知识点](about:blank#slot__162)

• 为什么需要模块化？

• • CommonJs

  • ES6

  • • export

    • import

视频：王红元老师的Vue

内容概述：

• 认识组件化

• 注册组件

• 组件其他补充

• 组件数据存放

• 父子组件通信

• 父级向子级传递

• 子级向父级传递

• 插槽 slot

组件化

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

认识组件化

---

我们将一个完整的页面分成很多个组件：

• 每个组件都用于实现页面的一个功能块

• 而每一个组件又可以进行细分

  

---

Vue 组件化思想：

• 组件化是 Vue.js 中的重要思想，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用

• 任何的应用都会被抽象成一颗组件树

  

组件化思想的应用：

• 有了组件化的思想，我们在之后的开发中就要充分的利用它

• 尽可能的将页面拆分成一个个小的、可复用的组件

• 这样让我们的代码更加方便组织和管理，并且扩展性也更强

注册组件

---

组件的使用分成三个步骤：

• 创建组件构造器

• 注册组件

• 使用组件

---

上面注册组件的方式有些繁琐，Vue 提供了注册的语法糖：

• 主要是省去了调用 Vue.extend() 的步骤，而是可以直接使用一个对象来代替

语法糖注册全局组件和局部组件：

---

组件中 template 里的 HTML 代码是可以被分离出来的，Vue 提供了两种方案来定义 HTML 模块内容：

• 使用 <script> 标签

  

• 使用 <template> 标签

  

全局组件和局部组件

---

当我们通过调用 Vue.component() 注册组件时，组件的注册是全局的

• 这意味着该组件可以在任意 Vue 示例下使用

如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

父子组件

---

组件数据

---

组件自己的数据存放在哪里呢?

• 组件对象也有一个 data 属性(也可以有 methods 等属性)

  只是这个 data 属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据

  

data 为什么是一个函数呢?

• 首先，如果不是一个函数，Vue 直接就会报错

• 其次，Vue 让每个组件对象都返回一个新的对象（利用函数的作用域使各个组件间互不影响），如果是同一个对象的，组件在多次使用后会相互影响

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719170222528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_1,color_FFFFFF,t_70)

父子组件的通信

---

如何进行父子组件间的通信呢？Vue 官方提到：

• 通过 props 向子组件传递数据

• 通过 事件 向父组件发送消息

  

父->子：props

在组件中，使用选项 props 来声明需要从父级接收到的数据

props 的值有两种方式：

• 方式一：字符串数组，数组中的字符串就是传递时的名称

• 方式二：对象，对象可以设置传递时的类型，也可以设置默认值等

一个最简单的 props 传递：

---

当需要对 props 进行类型等验证时，就需要对象写法了

验证支持的数据类型：

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

  

• 当有自定义构造函数时，验证也支持自定义的类型

  

子->父：$emit()

props 用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中

自定义事件的流程：

• 在子组件中，通过 $emit() 来触发事件。

• 在父组件中，通过 v-on 来监听子组件事件。

父子组件的访问方式

---

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件

• 父组件访问子组件：使用 $children 或 $refs

• 子组件访问父组件：使用 $parent

$children

this.$children 是一个数组类型，它包含所有子组件对象

我们这里通过一个遍历，取出所有子组件的 message 状态。

$refs

$children 的缺陷：通过 $children 访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值，但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。

总目录展示

该笔记共八个节点（由浅入深），分为三大模块。

高性能。 秒杀涉及大量的并发读和并发写，因此支持高并发访问这点非常关键。该笔记将从设计数据的动静分离方案、热点的发现与隔离、请求的削峰与分层过滤、服务端的极致优化这4个方面重点介绍。

一致性。 秒杀中商品减库存的实现方式同样关键。可想而知，有限数量的商品在同一时刻被很多倍的请求同时来减库存，减库存又分为“拍下减库存”“付款减库存”以及预扣等几种，在大并发更新的过程中都要保证数据的准确性，其难度可想而知。因此，将用一个节点来专门讲解如何设计秒杀减库存方案。

高可用。 虽然介绍了很多极致的优化思路，但现实中总难免出现一些我们考虑不到的情况，所以要保证系统的高可用和正确性，还要设计一个PlanB来兜底，以便在最坏情况发生时仍然能够从容应对。笔记的最后，将带你思考可以从哪些环节来设计兜底方案。

---

篇幅有限，无法一个模块一个模块详细的展示（这些要点都收集在了这份《高并发秒杀顶级教程》里），觉得有需要的码友们，麻烦各位转发一下（可以帮助更多的人看到哟！）点这里，即可获得免费下载的方式！！

由于内容太多，这里只截取部分的内容。需要这份《高并发秒杀顶级教程》的小伙伴，麻烦各位帮忙点赞分享支持一下（可以帮助更多的人看到哟！）
优化思路，但现实中总难免出现一些我们考虑不到的情况，所以要保证系统的高可用和正确性，还要设计一个PlanB来兜底，以便在最坏情况发生时仍然能够从容应对。笔记的最后，将带你思考可以从哪些环节来设计兜底方案。

---

篇幅有限，无法一个模块一个模块详细的展示（这些要点都收集在了这份《高并发秒杀顶级教程》里），觉得有需要的码友们，麻烦各位转发一下（可以帮助更多的人看到哟！）点这里，即可获得免费下载的方式！！

[外链图片转存中…(img-qElpTThF-1628600632299)]

[外链图片转存中…(img-oXJSHKPm-1628600632301)]

由于内容太多，这里只截取部分的内容。需要这份《高并发秒杀顶级教程》的小伙伴，麻烦各位帮忙点赞分享支持一下（可以帮助更多的人看到哟！）