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

Vue中内置组件

🍤Teleport介绍

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

• hello-world组件

<template>
  <div class="hello-world">
    <h2>hello-worldh2>
  div>
template>
1
2
3
4
5

• hello-world组件咋App中使用

<template>
  <div class="app">
    <div class="hello">
      <p class="content">
        
        <hello-world />
      p>
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10

那么组件Hello World中template的元素，会被挂载到组件App中template的p元素下面；

最终我们的应用程序会形成一颗DOM树结构, 如下图所示；

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

比如移动到body元素上，或者我们有其他的div#app之外的其他元素上；

这个时候我们就可以通过teleport内置组件来完成；

那么Teleport是什么呢？

它是一个Vue提供的内置组件，它类似于react的Portals；

teleport翻译过来是心灵传输、远距离运输的意思；

🍤Teleport使用

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

to：指定将其中的内容移动到的目标元素，可以使用选择器；

disabled：是否禁用 teleport 的功能；

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

<template>
  <div class="app">
    <div class="hello">
      <p class="content">
        
        <teleport to="body">
          <hello-world />
        teleport>
      p>
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12

代码效果如下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DPPTLIc6-1659682987391)(img/Snipaste_2022-08-05_13-50-13.png)]

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

<template>
  <div class="app">
    <div class="hello">
      <p class="content">
        <teleport to="body">
          <h2>你好 哈哈哈h2>
          <h2>你好 呵呵呵h2>
        teleport>
      p>
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12

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

<template>
  <div class="app">
    <div class="hello">
      <p class="content">
        
        <teleport to="body">
          <h2>你好 哈哈哈h2>
          <h2>你好 呵呵呵h2>
        teleport>
        
        <teleport to="body">
          <hello-world />
        teleport>
      p>
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

🍤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>Loadingh2>
      template>
    suspense>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12

Vue的安装插件

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

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

函数类型：一个function，这个函数会在安装插件时自动执行；

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

添加全局方法或者 property，通过把它们添加到 config.globalProperties 上实现；

添加全局资源：指令/过滤器/过渡等；

通过全局 mixin 来添加一些组件选项；

一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

插件的编写方式

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

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