关于vue3编写挂载DOM的插件问题

 更新时间:2021年07月27日 09:13:41   作者:孤云独去闲  
这篇文章主要介绍了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中如何实现在线预览word文件、excel文件

    Vue中如何实现在线预览word文件、excel文件

    这篇文章主要介绍了Vue中如何实现在线预览word文件、excel文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue3+ts+elementPLus实现v-preview指令

    vue3+ts+elementPLus实现v-preview指令

    本文主要介绍了vue3+ts+elementPLus实现v-preview指令,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue+element开发一个谷歌插件的全过程

    vue+element开发一个谷歌插件的全过程

    这篇文章主要给大家介绍了关于vue+element开发一个谷歌插件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue.js组件tree实现省市多级联动

    Vue.js组件tree实现省市多级联动

    这篇文章主要为大家详细介绍了Vue.js组件tree实现省市多级联动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue Tab切换以及缓存页面处理的几种方式

    vue Tab切换以及缓存页面处理的几种方式

    相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。
    2021-05-05
  • 5个可以加速开发的VueUse函数库(小结)

    5个可以加速开发的VueUse函数库(小结)

    VueUse为Vue开发人员提供了大量适用于Vue2和Vue3的基本Composition API 实用程序函数。具有一定的参考价值,感兴趣的可以了解一下
    2021-11-11
  • vue中modal传输数据并刷新部分页面数据方式

    vue中modal传输数据并刷新部分页面数据方式

    这篇文章主要介绍了vue中modal传输数据并刷新部分页面数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • element-ui 关于获取select 的label值方法

    element-ui 关于获取select 的label值方法

    今天小编就为大家分享一篇element-ui 关于获取select 的label值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue 使用饿了么UI仿写teambition的筛选功能

    vue 使用饿了么UI仿写teambition的筛选功能

    这篇文章主要介绍了vue 如何使用饿了么UI仿写teambition的筛选功能,帮助大家更好的理解和学习使用vue框架
    2021-03-03
  • Vue 如何使用props、emit实现自定义双向绑定的实现

    Vue 如何使用props、emit实现自定义双向绑定的实现

    这篇文章主要介绍了Vue 如何使用props、emit实现自定义双向绑定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论