关于vue3编写挂载DOM的插件问题
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,
在请教了 vue3 的开发大佬后,有了以下方案:(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的插件的文章就介绍到这了,更多相关vue挂载dom插件内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 下面小编就为大家带来一篇C#学习笔记- 随机函数Random()的用法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30PHP用DOM方式处理HTML之《Simple HTML DOM》
近经常需要采集一些网上的数据,发现一个PHP处理HTML的利器 simple html dom,看了一下文档,使用非常方便,关键是能够用CSS选择器来访问DOM树,和jquery相似,实在是难得的利器...2016-11-25vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25