使用createApp新创建的app如何继承原来的app里的组件和config？

[flicat]

Version

3.1.5

Reproduction link

[https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE e3sgbXNnIH19PC9oMT5cbjwvdGVtcGxhdGU XG5cbjxzY3JpcHQ XG5pbXBvcnQgeyBnZXRDdXJyZW50SW5zdGFuY2UgfSBmcm9tICd2dWUnXG5pbXBvcnQgY29tIGZyb20gJy4vY29tLmpzJ1xuaW1wb3J0IG15X3N1Yl9jb20gZnJvbSAnLi9teV9zdWJfY29tLnZ1ZSdcbmltcG9ydCBteV9zdWJfc3ViX2NvbSBmcm9tICcuL215X3N1Yl9zdWJfY29tLnZ1ZSdcbiAgXG5leHBvcnQgZGVmYXVsdCB7XG4gIGNvbXBvbmVudHM6IHtcbiAgICBteV9zdWJfc3ViX2NvbVxuICB9LFxuICBzZXR1cCgpIHtcbiAgICBjb25zdCBhcHAgPSBnZXRDdXJyZW50SW5zdGFuY2UoKVxuXHRcdGFwcC5hcHBDb250ZXh0LmFwcC51c2UoY29tKVxuICAgIGFwcC5hcHBDb250ZXh0LmNvbmZpZy5nbG9iYWxQcm9wZXJ0aWVzLiRpbml0KG15X3N1Yl9jb20pXG4gIH1cbn1cbjwvc2NyaXB0PiIsImNvbS5qcyI6ImltcG9ydCBteV9jb20gZnJvbSAnLi9teV9jb20udnVlJ1xuaW1wb3J0IHsgY3JlYXRlQXBwLCBoLCBtYXJrUmF3IH0gZnJvbSAndnVlJ1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiAoQXBwKSB7XG4gIGxldCBDb20gPSBjcmVhdGVBcHAoe1xuICAgIGRhdGEgKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgY29tcG9uZW50OiBudWxsXG4gICAgICB9XG4gICAgfSxcbiAgICByZW5kZXIoKSB7XG4gICAgICByZXR1cm4gaChteV9jb20sIHtcbiAgICAgICAgY29tcG9uZW50OiB0aGlzLmNvbXBvbmVudFxuICAgICAgfSlcbiAgICB9XG4gIH0pXG5cbiAgY29uc3QgY29tRG9tID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2JylcbiAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChjb21Eb20pXG4gIGNvbnN0IHZtID0gQ29tLm1vdW50KGNvbURvbSlcbiAgXG4gIEFwcC5jb25maWcuZ2xvYmFsUHJvcGVydGllcy4kaW5pdCA9IGZ1bmN0aW9uIChjb21wb25lbnQpIHtcbiAgICB2bS5jb21wb25lbnQgPSBtYXJrUmF3KGNvbXBvbmVudClcbiAgfVxufVxuIiwibXlfY29tLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGNvbXBvbmVudCA6aXM9XCJjb21wb25lbnRcIj48L2NvbXBvbmVudD5cbiAgPHA dGhpcyBpcyBteV9jb208L3A XG48L3RlbXBsYXRlPlxuXG5cbjxzY3JpcHQ XG5leHBvcnQgZGVmYXVsdCB7XG4gIHByb3BzOiB7XG4gICAgY29tcG9uZW50OiBPYmplY3RcbiAgfVxufVxuPC9zY3JpcHQ XG4iLCJteV9zdWJfY29tLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPG15X3N1Yl9zdWJfY29tPjwvbXlfc3ViX3N1Yl9jb20 XG4gIDxwPnRoaXMgaXMgbXlfc3ViX2NvbTwvcD5cbjwvdGVtcGxhdGU XG4iLCJteV9zdWJfc3ViX2NvbS52dWUiOiI8dGVtcGxhdGU XG4gIDxwPnRoaXMgaXMgbXlfc3ViX3N1Yl9jb208L3A XG48L3RlbXBsYXRlPiJ9](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE e3sgbXNnIH19PC9oMT5cbjwvdGVtcGxhdGU XG5cbjxzY3JpcHQ XG5pbXBvcnQgeyBnZXRDdXJyZW50SW5zdGFuY2UgfSBmcm9tICd2dWUnXG5pbXBvcnQgY29tIGZyb20gJy4vY29tLmpzJ1xuaW1wb3J0IG15X3N1Yl9jb20gZnJvbSAnLi9teV9zdWJfY29tLnZ1ZSdcbmltcG9ydCBteV9zdWJfc3ViX2NvbSBmcm9tICcuL215X3N1Yl9zdWJfY29tLnZ1ZSdcbiAgXG5leHBvcnQgZGVmYXVsdCB7XG4gIGNvbXBvbmVudHM6IHtcbiAgICBteV9zdWJfc3ViX2NvbVxuICB9LFxuICBzZXR1cCgpIHtcbiAgICBjb25zdCBhcHAgPSBnZXRDdXJyZW50SW5zdGFuY2UoKVxuXHRcdGFwcC5hcHBDb250ZXh0LmFwcC51c2UoY29tKVxuICAgIGFwcC5hcHBDb250ZXh0LmNvbmZpZy5nbG9iYWxQcm9wZXJ0aWVzLiRpbml0KG15X3N1Yl9jb20pXG4gIH1cbn1cbjwvc2NyaXB0PiIsImNvbS5qcyI6ImltcG9ydCBteV9jb20gZnJvbSAnLi9teV9jb20udnVlJ1xuaW1wb3J0IHsgY3JlYXRlQXBwLCBoLCBtYXJrUmF3IH0gZnJvbSAndnVlJ1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiAoQXBwKSB7XG4gIGxldCBDb20gPSBjcmVhdGVBcHAoe1xuICAgIGRhdGEgKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgY29tcG9uZW50OiBudWxsXG4gICAgICB9XG4gICAgfSxcbiAgICByZW5kZXIoKSB7XG4gICAgICByZXR1cm4gaChteV9jb20sIHtcbiAgICAgICAgY29tcG9uZW50OiB0aGlzLmNvbXBvbmVudFxuICAgICAgfSlcbiAgICB9XG4gIH0pXG5cbiAgY29uc3QgY29tRG9tID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2JylcbiAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChjb21Eb20pXG4gIGNvbnN0IHZtID0gQ29tLm1vdW50KGNvbURvbSlcbiAgXG4gIEFwcC5jb25maWcuZ2xvYmFsUHJvcGVydGllcy4kaW5pdCA9IGZ1bmN0aW9uIChjb21wb25lbnQpIHtcbiAgICB2bS5jb21wb25lbnQgPSBtYXJrUmF3KGNvbXBvbmVudClcbiAgfVxufVxuIiwibXlfY29tLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGNvbXBvbmVudCA6aXM9XCJjb21wb25lbnRcIj48L2NvbXBvbmVudD5cbiAgPHA dGhpcyBpcyBteV9jb208L3A XG48L3RlbXBsYXRlPlxuXG5cbjxzY3JpcHQ XG5leHBvcnQgZGVmYXVsdCB7XG4gIHByb3BzOiB7XG4gICAgY29tcG9uZW50OiBPYmplY3RcbiAgfVxufVxuPC9zY3JpcHQ XG4iLCJteV9zdWJfY29tLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPG15X3N1Yl9zdWJfY29tPjwvbXlfc3ViX3N1Yl9jb20 XG4gIDxwPnRoaXMgaXMgbXlfc3ViX2NvbTwvcD5cbjwvdGVtcGxhdGU XG4iLCJteV9zdWJfc3ViX2NvbS52dWUiOiI8dGVtcGxhdGU XG4gIDxwPnRoaXMgaXMgbXlfc3ViX3N1Yl9jb208L3A XG48L3RlbXBsYXRlPiJ9)

Steps to reproduce

使用createApp新创建的app如何继承原来的app里的组件和config？

What is expected?

createApp 创建新的app可以继承别的app的组件和方法

What is actually happening?

无法复用

[flicat]

createApp 之后 调用 mount 方法，或者还有别的方法可以添加第三方组件的DOM到页面中？

[edison1105]

your reproduction link is broken.

is this what you looking for.
https://v3.vuejs.org/guide/migration/global-api.html#share-configurations-among-apps

[flicat]

完整代码：

App.vue

<template>
  <myCom></myCom><!--能正常显示-->
</template>

<script>
import { getCurrentInstance } from 'vue'
import my_plugin from './my_plugin.js'
import option_com from './option_com.vue'
import my_com from './my_com.vue'

export default {
  setup() {
    const app = getCurrentInstance()
    app.appContext.app.component('myCom', my_com)
    app.appContext.app.use(my_plugin)
    const { $test } = app.appContext.config.globalProperties
    $test(option_com)
  }
}
</script>

my_plugin.js

import my_plugin from './my_plugin.vue'
import { createApp, h, markRaw } from 'vue'

export default function (App) {
  const Com = createApp({
    data() {
      return {
        component: null
      }
    },
    render() {
      return h('div', {
        style: {
          position: 'fixed',
          right: 0,
          top: 0,
          zIndex: 1
        }
      }, h(my_plugin, {
        component: this.component
      }))
    }
  })

  const comDom = document.createElement('div')
  document.body.appendChild(comDom)
  const vm = Com.mount(comDom)

  App.config.globalProperties.$test = function (component) {
    vm.component = markRaw(component)
  }
}

my_plugin.vue

<template>
  <component :is="component"></component>
  <p>this is my_plugin</p>
</template>

<script>
export default {
  props: {
    component: Object
  }
}
</script>

option_com.vue

<template>
  <myCom></myCom><!--不能正常显示-->
  <p>this is option_com</p>
</template>

my_com.vue

<template>
  <p>this is my_com</p>
</template>

大概这样的一个业务逻辑，由于 my_com 是定义在 App.vue， 这导致在 my_plugin 里面创建的新 app 对象里面无法使用他。

[Vue warn]: Failed to resolve component: myCom

[flicat]

老项目升级，不能解决就不升级了 😢

[edison1105]

@flicat
see #2097 (comment)

[flicat]

@flicat
see #2097 (comment)

thanks, give up 😂

[edison1105]

@flicat 为啥呢，我没测试，按照尤大的评论，应该是可以解决的啊。

I did a demo see playground

[flicat]

@flicat 为啥呢，我没测试，按照尤大的评论，应该是可以解决的啊。

I did a demo see playground

没想到 vNode 还能这么用，问题解决了，非常感谢！！！😆

  App.config.globalProperties.$test = function (component) {
    vm.component.proxy.comp =markRaw(component)
  }