teleport内置组件和plugins插件基本使用

最新推荐文章于 2024-10-07 23:45:51 发布

前端小咸鱼一条

最新推荐文章于 2024-10-07 23:45:51 发布

阅读量504

点赞数 5

分类专栏： Vue3 文章标签： vue 前端

本文链接：https://blog.csdn.net/xiaoxiannvh/article/details/138547023

版权

Vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

teleport内置组件和plugins插件基本使用

一. teleport内置组件使用

在组件化开发中，我们封装一个组件A，在另外一个组件B中使用：
1.1. 组件A中的template的元素，会被挂载到组件B中的template某个位置；
1.2. 最终我们的应用程序会形成一颗DOM树结构
某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置：
2.1. 例如：移动到body元素上，或者我们有晴天的div#app之外的元素上；
2.2. 可通过teleport来完成；
3.Teleport是？
3.1. Vue提供的内置组件，类似于react中的Portals；
3.2. teleport翻译过来时心灵传输、远距离运输的意思；
3.3. 属性：
3.3.1. to: 指定将其中的内容移动到目标元素，可使用选择器；
3.3.2. disabled: 是否禁用teleport的功能；

1. 模板中使用teleport

<template>
  <div class="app">
  <teleport to="#why">
      <button>+1</button>
      <h2>当前计数</h2>
      <hello-world></hello-world>
    </teleport>

    <teleport to="#why">
      <span>呵呵呵呵</span>
    </teleport>
   </div>
</template>

1. public中模板中不在app元素中的任意html元素

// 精简写法：
<div id="app"></div>
<div id="why"></div>

// 全部模板
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div id="why"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

二. plugins插件使用

在Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：
1.1. 对象类型：一个对象，但是必须包含一个install的函数，该函数惠子啊安装插件时执行；
1.2. 函数类型：一个function，这个函数会在安装插件时自动执行；
插件的使用：
2.1. 添加全局方法或者property, 通过把它们添加到到config.globalProperties上实现
2.2. 添加全局资源：指令/过滤器/过渡等；
2.3. 通过全局mixin来添加一些组件选项；
2.4. 一个库，提供自己的API，同时提供提到的一个或多个功能；

1.创建插件的方式：

// 1.对象方式 plugins_object.js
export default {
  install (app) {
    console.log('install==',app)
    // 配置全局属性,放到全局上会有一个约定的规范：$开头
    app.config.globalProperties.$name = 'coderwhy'
  }
}


// 2.函数方式 plugins_function.js
export default function (app) {
  console.log('function=',app);
}

2.main.js中引用

import pluginsObject from './13_plugins/plugins_object.js'
import pluginsFunction from './13_plugins/plugins_function.js'

// 通过调用app.use()方法，把这个导入的插件对象传进去，传进去之后就会安装这个插件(自动安装)，安装的方式就是调用这个插件对象的install方法
app.use(pluginsObject)
// 内部是拿到这个对象，执行install方法,并把app实例对象传进去  pluginsObject.install(app)
app.use(pluginsFunction)

完整写法：

import {createApp} from 'vue'
import App from './13_plugins/App.vue'
import pluginsObject from './13_plugins/plugins_object.js'
import pluginsFunction from './13_plugins/plugins_function.js'

// 通过调用app.use()方法，把这个导入的插件对象传进去，传进去之后就会安装这个插件(自动安装)，安装的方式就是调用这个插件对象的install方法
app.use(pluginsObject)
// 内部是拿到这个对象，执行install方法,并把app实例对象传进去  pluginsObject.install(app)
app.use(pluginsFunction)

app.mount('#app')