Vue中HTML的代码如何复用

Question

题目描述

写页面的时候，发现页面与页面之间的增删查改都很相似，但也有不同，就使用了Vue中的混入，将js里面的方法，变量大部分复用了，但是发现html中有很多地方还是很相似，这些我该如何分离出来。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<!-- 添加Modal -->
<!-- 比如下面的变量和方法全部都写到混入中了， -->
<!-- 但是这段的html在其他页面也是一样的， -->
<!-- 我该怎么把这一块分离出来， -->
<!-- 这样写这一段的时候就不用再关注@ok和@cancel等一些的逻辑问题了， -->
<!-- 只需要关注样式和标题了 -->
<a-modal
  width="800px"
  :visible="addModal"
  title="创建断面"
  @ok="handleAddOk"
  @cancel="closeAddModal">
  <section-info-form ref="addRef"
                     type="add"
                     @addSuccess="addSuccess"
                     @addError="addError">
  </section-info-form>
</a-modal>

我的尝试

我尝试了template、v-html、组件(因为方法写在混入中，但是混入又引入在父组件中，所以，这里调用时常有点混乱，用$parent也不怎么好使)

我的想法

我在想是否有什么方式，可以把这段html代码写在混入中，然后通过调用一个方法或者变量什么的，在页面中调用。

Answer 1

render 函数