Vue js에서 컴포넌트 템플릿을 여러 부분으로 분할할 수 있는 실행 가능한 솔루션이 있습니까?

Vue js에서 컴포넌트 템플릿을 여러 부분으로 분할할 수 있는 실행 가능한 솔루션이 있습니까?

컴포넌트가 있는데 소품 값에 따라 템플릿 내용이 다릅니다.컴포넌트의 구조가 좋지 않은 것 같아서 누구나 코드를 이해하기가 매우 불편할 것 같습니다.컴포넌트를 여러 개의 디비전으로 분할하려면 어떻게 해야 합니까?

<template>
<div>
    <div v-if='config.isTag'>
       <!-- some 10 lines of code -->
        <span 
            v-if="ok" 
            class="class">
        </span>
        <span v-else >
            <em>
            <!-- some 3 lines of code --></em>
        </span>
    </div>
    <div 
        v-if="ok"
        class='classes'>
        <div v-if="ok">
            <div v-if="ok" >
               <!-- some 20 lines of code -->
            </div>
            <div 
                v-else
                class="classes" 
                >
               <!-- some 40 lines of code -->
                <div 
                    class="class">
                    <!-- some 4 lines of code -->
                </div>
            </div>
        </div>
        <div 
            class="option-list" 
            >
            <div
                v-if="ok">
                 <!-- some 30 lines of code -->
            </div>
            <div 
                v-show='condition_ok'
                v-for="(data, i) in list"
                :key="i">
               <!-- some 40 lines of code -->
            </div>
        </div>
     </div>
</div
</template>

이건 내 템플릿이고 200줄의 코드가 필요해...좀 더 짧게 하거나 여러 곳에서 템플릿을 가지고 필요할 때 Import할 수 있는 방법이 없을까요?

즉, 컴포넌트를 여러 조각으로 분할하는 것입니다.

이건 가능할 뿐만 아니라 필수적이야!

고객의 경우는, 다음과 같이 실시할 수 있습니다.

<template>
    <div>
        <div v-if='config.isTag'>
            <CustomComponentOne></CustomComponentOne>
        </div>
        <div v-if="ok"
            class='classes'>
                <CustomComponentTwo></CustomComponentTwo>
            <div class="option-list">
                <div v-if="ok">
                    <CustomComponentThree></CustomComponentThree>
                </div>
                <div v-show='condition_ok'
                    v-for="(data, i) in list"
                    :key="i">
                    <CustomComponentFour></CustomComponentFour>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import CustomComponentOne from '@/components/CustomComponentOne'
    import CustomComponentTwo from '@/components/CustomComponentTwo'
    import CustomComponentThree from '@/components/CustomComponentThree'
    import CustomComponentFour from '@/components/CustomComponentFour'

    export default {
        components: {
            CustomComponentOne,
            CustomComponentTwo,
            CustomComponentThree,
            CustomComponentFour
        }
    }
</script>

<style scoped>

</style>

언급URL : https://stackoverflow.com/questions/55078141/is-there-any-feasible-solution-to-split-the-components-template-into-multiple-pa