HTML结合Vue代码如何复用？

Question

各位前辈好：

本人小白，开发试卷模块过程中，试卷编辑页面已经写好，并利用Vue实现数据双向绑定。

现需要开发试卷预览模块，如何实现写好的许多代码（如下）复用？

看了下如何实现HTML复用，该帖的实现好像只是静态页面，不知如何实现Vue的数据渲染？

望给位前辈不啬指点一二

 <!-- 试卷题目 -->
        <div v-for = "(item, index) in questions">
            
            <!-- 题目 title -->
            <div>
                <label>{{index + 1}}</label>
                <span>. 题型：</span>
                <select :id = "'questionType'+index" @change = "changeQuestionType(index)" v-model = "item.questionType">
                    <option value = "1">填空</option>
                    <option value = "2">判断</option>
                    <option value = "3">单选</option>
                    <option value = "4">多选</option>
                    <option value = "5">问答</option>
                    <option value = "6">投票</option>
                    <option value = "7">匹配</option>
                    <option value = "8" v-show = "item.parentId == null || item.parentId == -1">综合</option>
                </select>
                <input v-model="item.score" type="number">
                <span>分</span>
                <button v-on:click = "saveQuestion(index)">
                    保存题目
                </button>
                <button @click = "deleteQuestion(item.questionId)">
                    删除题目
                </button>
            </div>

            <!-- 题干 -->
            <div :id = "'stem'+index">
            ……省略
            </div>
</div>

Answer 1

vue的组件不就是复用了么

Answer 2

写好的这个可以作为一个组件，编辑和预览页面都引用该组件，通过传参判断是编辑还是预览，如果是预览就禁止掉那些@click操作

Answer 3

prop 父传子
this.emit 子传父 （事件和value）
上两个是传值
组件复用