Components handed via props in vue3

user_5114109 0
Viewed 2499

In Vue 2 I had a custom routing solution that involved in some cases handing in components as props.

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

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

In vue 3 this gives the warning: "Vue received a Component which was made a reactive".

Is there a way of avoiding this warning? Is it possible to dynamically add components to a component?

If you have an array of components that is not globally registered in App.components is it possible to render them without warnings?

Here is an older question about this in Vue2: Is it possible to pass a component as props and use it in a child Component in Vue?

Note the above code works fine in Vue2, this question is specifically about Vue3.

vuejs3 vue.js
1 Answers

The solution to stop the errors appears to be to wrap my component or list of components in markRaw prior to setting on data. This stops vue3 making it reactive.

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>

user_51141090
Related