Vue高级语法(二) | 内置组件和了解Vue安装插件

我不是女神ヾ 2024-04-27 15:55 60阅读 0赞

#### 文章目录 ####

*   *  Vue中内置组件
     *   *  ?Teleport介绍
         *  ?Teleport使用
         *  ?Suspense组件
     *  Vue的安装插件

### Vue中内置组件 ###

#### ?Teleport介绍 ####

**在组件化开发中，我们封装一个组件Hello World，在另外一个组件App中使用, 如下**：

*  hello-world组件

<template>
      <div class="hello-world">
        <h2>hello-world</h2>
      </div>
    </template>

*  hello-world组件咋App中使用

> 那么组件Hello World中template的元素，会被挂载到组件App中template的p元素下面；
> 
> 最终我们的应用程序会形成一颗DOM树结构, 如下图所示；

![在这里插入图片描述][b243521a0ebe4031a442a0c83dfc72af.png_pic_center]

**但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置**：

> 比如移动到body元素上，或者我们有其他的div\#app之外的其他元素上；
> 
> 这个时候我们就可以通过`teleport内置组件`来完成；

**那么Teleport是什么呢？**

> 它是一个`Vue提供的内置组件`，它类似于react的Portals；
> 
> teleport翻译过来是心灵传输、远距离运输的意思；

#### ?Teleport使用 ####

**我们刚刚说过, Teleport可以指定内容挂载到那个元素上, TelePort它有两个属性**：

> `to`：指定将其中的内容移动到的目标元素，可以使用选择器；
> 
> `disabled`：是否禁用 teleport 的功能；

**例如我们使用Teleport将刚刚的Hello World组件挂载到body元素中, 演示代码如下所示**:

**代码效果如下图所示**  
![在这里插入图片描述][077cd914bd584a5db3fba3a1a1a2f350.png_pic_center]  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DPPTLIc6-1659682987391)(img/Snipaste\_2022-08-05\_13-50-13.png)\]

**Teleport会将它标签中的内容, 挂载到to属性指定元素中, Teleport不仅仅是可以将组件挂载过去, 其他元素均可以**

![在这里插入图片描述][1d77f98607aa4573832b3f7a5403b8a7.png_pic_center]

**大家应该会有疑惑, 如果我们将多个teleport应用到同一个目标上（to的值相同），那么这些目标会进行合并, 不会有覆盖的效果**:

![在这里插入图片描述][2e0ee58d840e4b8aa895f4e62d026edb.png_pic_center]

#### ?Suspense组件 ####

**注意：Suspense组件虽然非常好用, 但是目前（2022-08-01） Suspense显示的是一个实验性的特性， API随时可能会修改**。

**Suspense是一个内置的全局组件，该组件有两个插槽**：

> `default`：如果default可以显示，那么显示default的内容；
> 
> `fallback`：如果default无法显示，那么会显示fallback插槽的内容；

<template>
      <div class="app">
        <suspense>
          <template #default>
            <async-home/>
          </template>
          <template #fallback>
            <h2>Loading</h2>
          </template>
        </suspense>
      </div>
    </template>

### Vue的安装插件 ###

**通常我们向Vue全局添加一些功能时，例如v-router, axios等等, 会采用插件的模式，它有两种编写方式**：

> 对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；
> 
> 函数类型：一个function，这个函数会在安装插件时自动执行；

**插件可以完成的功能没有限制，比如下面的几种都是可以的**：

> 添加全局方法或者 property，通过把它们添加到 config.globalProperties 上实现；
> 
> 添加全局资源：指令/过滤器/过渡等；
> 
> 通过全局 mixin 来添加一些组件选项；
> 
> 一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

**插件的编写方式**

// 方式一: 传入对象的情况
    // 传入对象, 会自动执行对象中的install函数, 并将app传入install对应的函数
    app.use({
        
      install: function(app) {
        
        console.log("传入对象的install被执行:", app)
      }
    })

// 方式二: 传入函数的情况
    // 传入函数, 会直接执行传入的函数, 并将app传给该函数
    app.use(function(app) {
        
      console.log("传入函数被执行:", app)
    })

[b243521a0ebe4031a442a0c83dfc72af.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/d18103799f3348c49b0ee9ce177b170f.png
[077cd914bd584a5db3fba3a1a1a2f350.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9082c8e20e6942f3919e075d191e4f8c.png
[1d77f98607aa4573832b3f7a5403b8a7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/c59395acaea6489e96dc10c880d3ae6b.png
[2e0ee58d840e4b8aa895f4e62d026edb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6d411a84db3b422cb50bd3b182ef6dd4.png