vue3中通过props传递的组件

Question

在 Vue 2 中，我有一个自定义路由解决方案，在某些情况下涉及将组件作为 props 提交。

<template>
    <div>
        <component :is="component" :data="componentData"/> 
    </div>
</template>

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

在 vue 3 中，这会发出警告：“Vue 接收到一个组件，该组件已变为反应式”。

有没有办法避免这个警告？是否可以动态添加组件到一个组件？

如果您有一组未在 App.components 中全局注册的组件，是否可以在没有警告的情况下呈现它们？

这是 Vue2 中关于此问题的一个较旧的问题：

注意上面的代码在 Vue2 中工作正常，这个问题专门针对 Vue3。

Answer 1

停止错误的解决方案似乎是在设置数据之前将我的组件或组件列表包装在 markRaw 中。这会阻止 vue3 使其具有反应性。

Mark Raw

<script>
import Page1     from './pages/page1.vue'
import Page2     from './pages/page2.vue'
import Page3     from './pages/page3.vue'
import Page4     from './pages/page4.vue'
import Page5     from './pages/page5.vue'
import {markRaw} from "vue"

const components = markRaw({
    Page1, Page2, Page3, Page4, Page5
})

export default {
    data() {
        return {
            components
        }
    }
}
</script>

vue3中通过props传递的组件

Components handed via props in vue3

vue.js

vuejs3