Über das Problem beim Schreiben von Plugins zum Mounten von DOM in vue3

// Haupt.js
importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Importieren Sie ElementPlus von „element-plus“.

const app = createApp(App)
app.use(ElementPlus) // Verwenden Sie das Ele.me-Framework app.mount('#app')

Standardfunktion exportieren installieren (Vue) {
  let app = Vue.extend({
    rendern (h) {
      return h('div', {
        Stil: {
          Anzeige: this.isShow ? 'flex' : 'keine'
        }
      })
    }
  })

  let appDom = neue App({
    el: document.createElement('div'),
    Daten: Funktion () {
      zurückkehren {
        isShow: false
      }
    }
  })

  Funktion zeigen () {
    appDom.isShow = true
  }

  Funktion ausblenden () {
    appDom.isShow = false
  }
  Vue.prototype.$show = anzeigen
  Vue.prototype.$hide = ausblenden
  Dokument.Body.AnhängenUntergeordnetesElement(appDom.$el)
}

importiere { createApp, h } von 'vue'

exportiere Standardfunktion install (App) {
  let app = erstelleApp({
    Daten() {
      zurückkehren {
        isShow: false,
      }
    },
    rendern() {
      return h('div', {
        Stil: {
          Anzeige: this.isShow ? 'flex' : 'keine'
        }
      })
    }
  })
  
  const vNodeDom = document.createElement('div')
  Dokument.Body.AnhängenUntergeordnetesElement(vNodeDom)
  const vm = app.mount(vNodeDom)

  App.config.globalProperties.$show = Funktion () {
    vm.isShow = true
  }

  App.config.globalProperties.$hide = Funktion () {
    vm.isShow = false
  }
}

// myCom.vue
<Vorlage>
  <el-button>Schaltfläche</el-button>
</Vorlage>


// myCom.js
importiere { createApp, h } von 'vue'
importiere myCom aus „./myCom.vue“
exportiere Standardfunktion install (App) {
  let app = erstelleApp({
    Daten() {
      zurückkehren {
        isShow: false
      }
    },
    rendern() {
      Rückgabewert h(myCom)
    }
  })

  const vNodeDom = document.createElement('div')
  Dokument.Body.AnhängenUntergeordnetesElement(vNodeDom)
  app.mount(vNodeDom)
}

importiere { render, h } von 'vue'
importiere myCom aus „./myCom.vue“

exportiere Standardfunktion install (App) {
  sei vNode = h({
    Daten() {
      zurückkehren {
        isShow: false,
      }
    },
    rendern() {
      Rückgabewert h(myCom)
    }
  })

  const vNodeDom = document.createElement('div')
  Dokument.Body.AnhängenUntergeordnetesElement(vNodeDom)
  vNode.appContext = App._context
  rendern(vNode, vNodeDom)

  App.config.globalProperties.$show = Funktion () {
    vNode.component.proxy.isShow = true
  }

  App.config.globalProperties.$hide = Funktion () {
    vNode.component.proxy.isShow = false
  }
}