在 vue3 中通过 props 传递的组件

Posted 2023-02-23

【中文标题】在 vue3 中通过 props 传递的组件

【英文标题】：Components handed via props in vue3

【发布时间】：2021-01-11 06:41:30

【问题描述】：

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

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

<script>
export default 
    props: 
        component: 
        componentData: 
    

</script>

在 vue 3 中，这会给出警告：“Vue 收到了一个被设为响应式的组件”。

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

如果您有一个未在 App.components 中全局注册的组件数组，是否可以在不发出警告的情况下渲染它们？

这是 Vue2 中关于此的一个较旧的问题： Is it possible to pass a component as props and use it in a child Component in Vue?

请注意，上面的代码在 Vue2 中运行良好，这个问题专门针对 Vue3。

【参考方案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>