【Vue3】第三篇

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，这样则其不生效。