vue.js单个文件组件中的重复代码

Question

在我的一个组件中，模板的某些部分重复两次。

有可能做这样的事吗？

<template>
    <div>
        <div v-if='value'>
        *** code here ***
        include 'path_to_file.vue.part'
        </div>
        <div v-else>
        ** another code here ***
        include 'path_to_file.vue.part'
        </div>
    </div>

</template>

Answer 1

利用(named) slots：

<slot name="common"></slot>

然后在模板中，您可以＆＃34;导入＆＃34;：

<p slot="common">some</p>

Answer 2

你可以这样替换第二个v-if：

<template>
    <div>
        <div v-if='value'>
        *** code here ***
        include 'path_to_file.vue.part'
        </div>
        <div v-if='!value'>
        ** another code here ***
        include 'path_to_file.vue.part'
        </div>
    </div>

</template>