vue3 跟 vue2 相比,多了一个 app 的概念,vue3 项目的创建也变成了

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' const app = createApp(App)
app.use(ElementPlus) // 使用饿了么框架
app.mount('#app')

所以 Vue.extend 也没有了。

vue2创建一个插件:

export default function install (Vue) {
  let app = Vue.extend({
render (h) {
return h('div', {
style: {
display: this.isShow ? 'flex' : 'none'
}
})
}
}) let appDom = new app({
el: document.createElement('div'),
data: function () {
return {
isShow: false
}
}
}) function show () {
appDom.isShow = true
} function hide () {
appDom.isShow = false
}
Vue.prototype.$show = show
Vue.prototype.$hide =
hide
document.body.appendChild(appDom.$el)

}

vue3创建一个插件:

import { createApp, h } from 'vue'

export default function install (App) {
let app = createApp({
data() {
return {
isShow: false,
}
},
render() {
return h('div', {
style: {
display: this.isShow ? 'flex' : 'none'
}
})
}
}) const vNodeDom = document.createElement('div')
document.body.appendChild(vNodeDom)
const vm = app.mount(vNodeDom) App.config.globalProperties.$show = function () {
vm.isShow = true
} App.config.globalProperties.$hide = function () {
vm.isShow = false
}
}

对比可以发现, vue3 的 DOM挂载方式是新创建一个 app 然后调用 mount() 方法插入到页面中。

全局方法的挂载方式也从 vue2 的 Vue.prototype 到 vue3 的 App.config.globalProperties。

除此之外,vue3 的插件如果用 createApp 来创建新的DOM结构插入到页面的话,与 main.js 中创建的 app 是隔绝开来的,这意味着 main.js 中 use 的组件和公共方法在 这个插件中无法使用。

// myCom.vue
<template>
  <el-button>按钮</el-button>
</template>

// myCom.js
import { createApp, h } from 'vue'
import myCom from './myCom.vue'
export default function install (App) {
let app = createApp({
data() {
return {
isShow: false
}
},
render() {
return h(myCom)
}
}) const vNodeDom = document.createElement('div')
document.body.appendChild(vNodeDom)
app.mount(vNodeDom)
}

上面的例子中,el-button 是无法正常显示的,控制台会报错:

[Vue warn]: Failed to resolve component: el-button

所以,如果既想要新建DOM,又要使用main.js全局注册的组件和方法,那就不能用 createApp,

在请教了 vu3 的开发大佬后,有了以下方案:(issues

import { render, h } from 'vue'
import myCom from './myCom.vue'

export default function install (App) {
let vNode = h({
data() {
return {
isShow: false,
}
},
render() {
return h(myCom)
}
}) const vNodeDom = document.createElement('div')
document.body.appendChild(vNodeDom)
vNode.appContext = App._context
render(vNode, vNodeDom)
App.config.globalProperties.$show = function () {
vNode.component.proxy.isShow = true
} App.config.globalProperties.$hide = function () {
vNode.component.proxy.isShow = false
}
}

这次没有创建新的 app,而是通过给 vNode 复制原来 app 的 context,从而达到组件和公共方法共用,

新创建的插件属性和方法通过 vNode.component.proxy 来访问。

el-button 也正确的解析出来了

vue3如何编写挂载DOM的插件的更多相关文章

  1. 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins)

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  2. 如何编写一个WebPack的插件原理及实践

    _ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...

  3. 编写自己的jquery插件

    如何编写自己的jquery插件 Jquery的插件主要分为三类: .封装对象方法的插件:大部分插件都是封装对象的插件 .封装全局函数的插件:将独立的函数添加到jquery的命名空间之下.Jquery. ...

  4. Viper 微服务框架 编写一个hello world 插件-02

    1.Viper是什么? Viper 是.NET平台下的Anno微服务框架的一个示例项目.入门简单.安全.稳定.高可用.全平台可监控.底层通讯可以随意切换thrift grpc. 自带服务发现.调用链追 ...

  5. vue3代码编写

    vue3代码编写 团队内的vue3已经升级一年,在这一年中vue也在不停的更新,为了最大化组合式api带来的优势,便需要合理规范代码的编写方式- 1.从vue2到vue3 vue2组件采用配置式API ...

  6. jQuery 使用 jQuery UI 部件工厂编写带状态的插件(翻译)

    首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...

  7. 编写基于jQuery的插件的方法

    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...

  8. XML DOM 循环(foreach)读取PHP数据 和 PHP 编写 XML DOM 【转载】

    用 PHP 读取和编写可扩展标记语言(XML)看起来可能有点恐怖.实际上,XML 和它的所有相关技术可能是恐怖的,但是用 PHP 读取和编写 XML 不一定是项恐怖的任务.首先,需要学习一点关于 XM ...

  9. JS编写简单的弹窗插件(含有demo和源码)

    最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...

随机推荐

  1. ContOS8 使用yum安装MariaDB

    首先全部删除MySQL/MariaDB(若是首次安装可根据需要跳过此步) 若不清楚MySQL和MariaDB的关系请移步至 Mariadb百科 1.查看系统版本(以下任一命令即可). # cat /p ...

  2. 腾讯TencentOS 十年云原生的迭代演进之路

    导语 TencentOS Server (又名 Tencent Linux 简称 Tlinux) 是腾讯针对云的场景研发的 Linux 操作系统,提供了专门的功能特性和性能优化,为云服务器实例中的应用 ...

  3. ES6中的Module与Interator

    小编今天在用Vue做项目的时候,发现组件中有import和export,刚好今天看到相关的语法介绍和一些实例,下面小编就和大家一起进步.对于模块化规范,在es6出现之前,有以下三种规范,分别是Comm ...

  4. Linux环境下安装配置vsftpd服务(三种认证模式)

    一.FTP简介 文件传输协议(英文:File Transfer Protocol,缩写:FTP)是用于在网络上进行文件传输的一套标准协议.它工作于网络传输协议的应用层,使用客户/服务器模式,主要是用来 ...

  5. 一个排序引发的BUG

    你好呀,我是why. 前两天在 Git 上闲逛的时候又不知不觉逛到 Dubbo 那里去了. 看了一下最近一个月的数据,社区活跃度还是很高的: 然后看了一下最新的 issue,大家提问都很积极. 其中看 ...

  6. js笔记15

    DOM2动态创建节点 1.生成节点的方法 document.createElement("div") 2.插入节点的方法 父元素.appendChild(新节点) 在父节点的子节点 ...

  7. TS基础应用 & Hook中的TS

    说在前面 本文难度偏中下,涉及到的点大多为如何在项目中合理应用ts,小部分会涉及一些原理,受众面较广,有无TS基础均可放心食用. **>>>> 阅完本文,您可能会收获到< ...

  8. Visual Studio 2010 SP1 中文升级补丁ISO完整版下载 (含多国语言)

    最近事情比较多,差点忘记了这个VS2010 SP1的升级补丁更新了,程序员们赶快更新吧!这次发布的SP1包含了下列语言:英文,简体中文,繁体中文,法语,德语,印度语,日语,韩语,俄语以及西班牙语. V ...

  9. 在Docker运行的Nignx内部署前后端分离项目

    环境准备: Linux服务器: IP: 192.168.1.10 前端打包后的Vue项目: Port-3000, 请求地址192.168.1.10:8080 后端打包后的Java项目: Port-80 ...

  10. 并发王者课-铂金9:互通有无-Exchanger如何完成线程间的数据交换

    欢迎来到<并发王者课>,本文是该系列文章中的第22篇,铂金中的第9篇. 在前面的文章中,我们已经介绍了ReentrantLock,CountDownLatch,CyclicBarrier, ...