有没有可行的解决方案在Vue js中将组件模板拆分为多个部分？答案

【问题标题】：Is there any feasible solution to split the components template into multiple parts in Vue js?有没有可行的解决方案在Vue js中将组件模板拆分为多个部分？
【发布时间】：2019-07-31 08:48:47
【问题描述】：

我有一个组件，它根据 props 值具有不同的模板内容。我觉得组件的结构不够好，任何人理解代码都会非常不舒服。如何将组件分成多个部分？

<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 行代码.....有什么方法可以让它更短，或者我可以从多个地方获取任何模板并在需要时将其导入？

也就是将组件拆分成多个片段。

【问题讨论】：

您应该考虑自己的组件拆分 - 是否有重复使用的代码可以放入自己的组件中？新样式指南还建议为不多次使用的组件创建具有特定命名的组件。例如TheHeader.vue。 vuejs.org/v2/style-guide/…
@sandrooco 我在两个地方重复使用了大约 15 行代码。
这仍然会在您的文件中保存 28 行。 :)
我没有重用@sandrooco，为什么要为juz 15行代码编写单独的组件？
因为您正在寻找使文件更短的方法。检查罗斯的回答，基本上就是我的意思。

标签： javascript node.js vue.js vuejs2 vue-component

【解决方案1】：

这不仅是可能的，而且是必不可少的！

在您的情况下，可以这样做：

<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>

【讨论】：

嘿，@Ross Gaith，所以我只能使用多个组件来做到这一点？
@VíñịtVịłłă 不看您的代码，我会说“是”；但是，您的代码可能会被重构，从而将其减少到不需要额外组件的程度。