Subscribe on changes!

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

avatar
Jul 23rd 2021

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?

无法复用

avatar
Jul 23rd 2021

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

avatar
Jul 23rd 2021

your reproduction link is broken.

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

avatar
Jul 23rd 2021

完整代码:

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
avatar
Jul 23rd 2021

老项目升级,不能解决就不升级了 :cry:

avatar
Jul 23rd 2021

@flicat see #2097 (comment)

thanks, give up :joy:

avatar
Jul 23rd 2021

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

I did a demo see playground

avatar
Jul 26th 2021

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

I did a demo see playground

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

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