Vue.js 범용 다이내믹 컴포넌트 렌더링

Vue.js 범용 다이내믹 컴포넌트 렌더링

소품으로 사용할 수 있는 컴포넌트를 동적으로 렌더링하는 컴포넌트가 있습니다.

<template>
    <div>
        <component :is="component" :data="data" v-if="component" />
    </div>
</template>

<script>

export default {
    name: 'dynamic-component-renderer',
    props: ['data', 'type'],
    computed: {
        component() {
            if (!this.type) {
                return null;
            }
            return this.type;
        },
    }
}
</script>

이 문제는 Import에 있습니다.다이나믹 Import가 필요합니다.웹 팩을 사용하면 다음과 같이 다이내믹 Import를 할 수 있습니다.() => import('./my-async-component')의 경우 lazy Load는 필요 없습니다.

따라서 일반적인 더미 컴포넌트가 필요합니다(dynamic-component-renderer어떤 컴포넌트가 취득될지 알 수 없으며 동적으로 렌더링됩니다.

언급URL : https://stackoverflow.com/questions/56807294/vue-js-generic-dynamic-component-rendering