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

- 一. teleport内置组件使用
- - 1. 模板中使用teleport
  - 1. public中模板中不在app元素中的任意html元素
- 二. plugins插件使用
- - 1.创建插件的方式：
  - 2.main.js中引用

一. 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')