如何使用vue组件

傷城~ 2024-02-17 13:26 50阅读 0赞

**目录**

1：组件之间的父子关系

2：使用组件的三个步骤

3：components组件的是私有子组件

4：在main.js文件中使用Vue.component全局注册组件

--------------------

#### 1：组件之间的父子关系 ####

一：首先封装好的组件是不存在任何的关系的，每个封装好的组件彼此都是独立的。

![882da105eba04f70ba07611d40aba474.png][]

二：在使用组件的过程中根据嵌套关系，可能形成兄弟关系或者父子关系如图所示（APP这个组件中用到了组件Left和组件Right，Left和Right组件与App组件就形成了父子关系，Left和Right组件就是兄弟关系）。

![45c60187fc254466b1a10b9cf337299f.png][]

#### 2：使用组件的三个步骤 ####

一：在哪些组件中需要用到哪些组件就使用import语法导入需要的组件

![2d027051dd47440cb6b3b993f2fc9b1b.png][]

二：使用components节点声明组件

**注意：**

**全写形式：（key:value）**

![5ae197c08774479cb15c103dd640f76f.png][]

**简写形式：key和value一致，一个名字声明即可**

![545117cc52854015901f65ca8dc4c293.png][]

三：按照标签的形式使用刚才注册的组件

![2686c4ba0fbb4c6a9e2c51b338502f3c.png][]

#### 3：components组件的是私有子组件 ####

例如：**组件A中的components节点下注册了B组件，那么B组件只能在A组件中进行使用，不能在C组件中进行使用，除非C组件的components节点下声明了B组件，可以使用B组件。**

#### 4：在main.js文件中使用Vue.component全局注册组件 ####

场景：**频繁使用的组件可以注册到main.js文件中进行全局注册。**

**在全局中注册的组件，其他的组件使用这个全局组件可直接使用注册时的名称作为标签，全局组件不可在组件中使用自己。**

![1fd25abd93eb41eb98ff78171de52cef.png][]

[882da105eba04f70ba07611d40aba474.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/bd2563b201594a6abb52d245689afce0.png
[45c60187fc254466b1a10b9cf337299f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/1ba00f2de8c34a4fb3ee2e7d7e4299c3.png
[2d027051dd47440cb6b3b993f2fc9b1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a04459e43f3a44e0a9812bf755b1dfe7.png
[5ae197c08774479cb15c103dd640f76f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/c49845ae2ec44d1fa9a12b637e418cd5.png
[545117cc52854015901f65ca8dc4c293.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/cc7c1886508242a9a8a8d57e01baf23c.png
[2686c4ba0fbb4c6a9e2c51b338502f3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/f6cbef2500604b44bf3e08bd769b47b2.png
[1fd25abd93eb41eb98ff78171de52cef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/9bad11337cc648dc8b8c6f18899687ca.png