快捷導(dǎo)航

關(guān)于vue3編寫(xiě)掛載DOM的插件問(wèn)題

更新時(shí)間：2021年07月27日 09:13:41 作者：孤云獨(dú)去閑

這篇文章主要介紹了vue3編寫(xiě)掛載DOM的插件的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue3 跟 vue2 相比，多了一個(gè) app 的概念，vue3 項(xiàng)目的創(chuàng)建也變成了

// 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 也沒(méi)有了。

vue2創(chuàng)建一個(gè)插件：

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創(chuàng)建一個(gè)插件：

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
  }
}

對(duì)比可以發(fā)現(xiàn)， vue3 的 DOM掛載方式是新創(chuàng)建一個(gè) app 然后調(diào)用 mount() 方法插入到頁(yè)面中。

全局方法的掛載方式也從 vue2 的 Vue.prototype 到 vue3 的 App.config.globalProperties。

除此之外，vue3 的插件如果用 createApp 來(lái)創(chuàng)建新的DOM結(jié)構(gòu)插入到頁(yè)面的話，與 main.js 中創(chuàng)建的 app 是隔絕開(kāi)來(lái)的，這意味著 main.js 中 use 的組件和公共方法在這個(gè)插件中無(wú)法使用。

// 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 是無(wú)法正常顯示的，控制臺(tái)會(huì)報(bào)錯(cuò)：

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

所以，如果既想要新建DOM，又要使用main.js全局注冊(cè)的組件和方法，那就不能用 createApp，

在請(qǐng)教了 vue3 的開(kāi)發(fā)大佬后，有了以下方案：（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
  }
}

這次沒(méi)有創(chuàng)建新的 app，而是通過(guò)給 vNode 復(fù)制原來(lái) app 的 context，從而達(dá)到組件和公共方法共用，

新創(chuàng)建的插件屬性和方法通過(guò) vNode.component.proxy 來(lái)訪問(wèn)。

el-button 也正確的解析出來(lái)了

到此這篇關(guān)于vue3如何編寫(xiě)掛載DOM的插件的文章就介紹到這了,更多相關(guān)vue掛載dom插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: