前端开发中

插槽 Slots 是一个重要的概念

我们可以查看一下vue.js的官方文档 

https://cn.vuejs.org/guide/components/slots

类似于连接通道一样

可以把核心代码逻辑搬到另外的地方 做一个引用

而原先的地方可能并不能这样书写

对于这个概念我在vue的官方文档里面找到了demo

大概就是这样

我们先定义组件

FancyButton.vue

然后定义插槽 传入组件的参数都会出现在插槽里面

主页面 App.vue

一个组件可以有多个插槽出口

 实际案例

现在是定义了一个表单的columns(列)

我们尝试一下渲染列中的内容 就可以运用插槽

      <!-- 判题信息 --><template #judgeInfo="{ record }">{{ JSON.stringify(record.judgeInfo) }}</template><!-- 展示的是提交时间  --><template #createTime="{ record }">{{ moment(record.createTime).format("YYYY-MM-DD") }}</template><!-- 展示 点击就能直接访问题目 --><template #questionId="{ record }"><router-link :to="'/view/question/' + record.questionId">{{ record.questionId }}</router-link></template><!-- 修改这里，展示判题状态 --><template #status="{ record }"><span v-if="record.status === 0">待判题</span><span v-else-if="record.status === 1">判题中</span><span v-else-if="record.status === 2">成功</span><span v-else-if="record.status === 3">失败</span><span v-else>未知状态</span></template>

最终效果