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的组件传值着手观察者模式)
- vue怎么引入axios(如何用vue封装axios请求)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue插槽的分类(vue具名插槽的基本使用实例)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- vue滑动切换页面(vue实现点击翻转效果)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- dockernginx服务器教程(Docker镜像+nginx 部署 vue 项目的方法)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- 小白vue教学(尤大大新活petite-vue的实现)
- 王铲铲的致富之路无限金币卡法攻略教学(王铲铲的致富之路无限金币卡法攻略教学)
- 文明6金币太少怎么办 文明6无限刷钱教程(文明6金币太少怎么办)
- 开国中将,王牌军63军首任政委,两个连襟一个上将一个少将传为佳话(王牌军63军首任政委)
- 臭名昭著的731部队最高负责人 石井四郎(臭名昭著的731部队最高负责人)
- 王牌部队,你看的剧情我看的时尚(你看的剧情我看的时尚)
- 被鉴定的古董价值300万 当心,你可能遇到诈骗了(被鉴定的古董价值300万)
热门推荐
- linq not in 查询
- docker默认网桥设置(Docker默认网段修改实现方法解析)
- 阿里云服务器ecs过期保留多久(阿里云ECS Windows服务器C盘权限被删除还能还原吗?)
- 如何获取存储过程返回值
- sqlserver常用的字符串函数(SqlServer 获取字符串中小写字母的sql语句)
- python面向对象练习方法(Python面向对象实现一个对象调用另一个对象操作示例)
- smart工具包括哪些元素(Smarty模板语法详解)
- 404页面如何设置
- docker rabbitmq集群部署(Docker部署rabbitmq遇到的两个问题)
- docker容器分配(Docker容器数据卷原理及使用方法解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9