书画院网站建设,wordpress移动下方的菜单,手机网站排名优化,标书制作注意事项前端开发中
插槽 Slots 是一个重要的概念
我们可以查看一下vue.js的官方文档
https://cn.vuejs.org/guide/components/slots 类似于连接通道一样
可以把核心代码逻辑搬到另外的地方 做一个引用
而原先的地方可能并不能这样书写
对于这个概念我在vue的官方文档里面找到了…前端开发中
插槽 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-ifrecord.status 0待判题/spanspan v-else-ifrecord.status 1判题中/spanspan v-else-ifrecord.status 2成功/spanspan v-else-ifrecord.status 3失败/spanspan v-else未知状态/span/template
最终效果
