Vue3学习第三篇
- [01. 组件组成](#01. 组件组成)
- [02. 组件嵌套关系](#02. 组件嵌套关系)
- [03. 组件注册方式](#03. 组件注册方式)
- [04. 组件传递数据Props](#04. 组件传递数据Props)
- [05. 组件传递多种数据类型](#05. 组件传递多种数据类型)
- [06. 组件传递Props校验](#06. 组件传递Props校验)
- [07. 组件事件](#07. 组件事件)
- [08. 组件事件配合v-model使用](#08. 组件事件配合v-model使用)
- [09. 组件数据传递](#09. 组件数据传递)
- [10. 透传Attributes](#10. 透传Attributes)
01. 组件组成
在vue 当中，组件是最重要的知识 ，因为在vue当中是组件化开发，也就是说，所有的内容都是由组件所组成的。
比如，我们写一个项目，这个项目 有很多功能 ，每个功能 都是由一个完整的组件去实现的，把这些功能或者说这些组件拼在一起就形成了一个完整的项目。
组件最大的优势就是可复用性
意思就是我们把一个功能抽离成一个组件之后，这个功能就可以被多次引用。
当使用构建步骤时，我们一般会将Vue组件定义在一个单独的
.vue文件中，这被叫做单文件组件（简称SFC）
template标签 ：承载所有的html标签
script标签 ：承载所有的业务逻辑
style标签 ：承载所有的样式
所以，一个vue的组件就承载了所有的我们页面所要呈现的内容，包含结构的html、逻辑的js、样式的css。
下面我们来看组件是如何使用的：
注意：scoped
如果不加它，则样式全局可用。
02. 组件嵌套关系
下面我们来实操完成页面：
（1）Header:
以此类推Main和Aside
（2）Main：
（3）Aside:
03. 组件注册方式
一个Vue组件 在使用前 需要先被"注册"，这样Vue才能在渲染模板时找到其对应的实现。
组件注册有两种方式：全局注册 和局部注册。
我们平常所使用的就是局部注册。（引入）
（1）全局注册
以Header为例：
在main.js 中通过app.component 注入。括号内：
第一个，为它起的名 （日后我们要引用的名字）
第二个，它的名字
全局注册则不需要在App.vue内import（引入）以及不需要components（注入） ，只需要显示 即可。（引入和注入在main.js内）
（2）局部注册
04. 组件传递数据Props
(1)普通Props父传子
在parent组件中，在child 展示 的标签内传递给child数据
child用Props接收：
结果：
（2）动态传递数据
我们上面parent传递给child的数据是写死的，其实我们可以动态传递数据。
注意：
05. 组件传递多种数据类型
06. 组件传递Props校验
(1)校验
vue组件可以对传递过来的数据类型校验
也可以是数组包括很多类型 传递过来的数据类型满足其中一个 即可
（2）默认值
用default设置默认值0：
传递则显示20，不传则显示默认值0（传的话，有
:age="age"）
注意：
其实就是通过函数 来增加默认值 返回。
(3)必选项
（必须传递数据 ）
不传递数据则报警告。
注意：
props是只读的，不允许修改 父元素传递过来的数据（但可以修改 自己data内的数据）
07. 组件事件
先前我们已经讲过事件处理 （给页面中的元素添加事件 ，如按钮的点击事件）。
今天我们就来学习组件事件 （给组件本身添加事件 ，目的是用来做组件之间的数据传递的）
注意：在老版本中称为自定义事件
props只能父传子，而自定义事件则可以实现子传父
也可以写在页面上 ：
child组件也可以如下：
08. 组件事件配合v-model使用
前面我们学过，v-model是表单中使用的一个指令，在input标签或者其他标签内用，在用户输入的同时来获取用户所输入的信息。
那么在组件中呢，则是：
在组件A 中输入 数据，在组件B 中实时得到数据。
下面是两个组件，Main和Search。
我们希望在Search组件的表单内输入数据，Main组件中获取数据（一边展示搜索框的内容）
要怎么做到呢？答：结合自定义事件 和侦听器 两者来实现。
09. 组件数据传递
先前我们并没有传递函数，而函数 是可以互相携带参数 的，所以我们可以利用这个细节来实现子传父
实际上还是A给B传，只不过在传递的时候B给A回了个参数
（实际上还是调用A中的函数执行）
10. 透传Attributes
不常用。了解即可。
相当于h3 里面具有 了attr-container 的样式。
还有个知识点 ：
把inheritAttrs 设为false ，这样则其不生效。