vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
类别:编程学习 浏览量:817
时间:2021-10-06 01:24:46 vue3兼容的插件多吗
关于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('li', { style: { display: this.isShow ? 'flex' : 'none' } }) } }) let appDom = new app({ el: document.createElement('li'), 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('li', { style: { display: this.isShow ? 'flex' : 'none' } }) } }) const vNodeDom = document.createElement('li') 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('li') 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('li') 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表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue时间转换(vue如何动态实时的显示时间浅析)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vue实现列表向上滚动更新(vue实现列表无缝滚动)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vuejs全家桶入门教程交流(Vue全家桶入门基础教程)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- vue原理详解(vue响应式原理与双向数据的深入解析)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)