Vue.js 插槽 Slots 实际应用 最近重构项目的时候遇到的...

前端开发中

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

最终效果

相关推荐
Nan_Shu_61423 分钟前
Web前端面试题(2)
前端
知识分享小能手30 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军2 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js