使用createApp新创建的app如何继承原来的app里的组件和config?
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?
无法复用
your reproduction link is broken.
is this what you looking for. https://v3.vuejs.org/guide/migration/global-api.html#share-configurations-among-apps
完整代码:
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 see #2097 (comment)
thanks, give up :joy:
@flicat 为啥呢,我没测试,按照尤大的评论,应该是可以解决的啊。
I did a demo see playground
@flicat 为啥呢,我没测试,按照尤大的评论,应该是可以解决的啊。
I did a demo see playground
没想到 vNode 还能这么用,问题解决了,非常感谢!!!😆
App.config.globalProperties.$test = function (component) {
vm.component.proxy.comp =markRaw(component)
}