vue 渲染函数处理slot_vue render 渲染函数
vue render 渲染函数
经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波
render函数分析
函数式组件
基础的使用方式
Link.vue
// https://github.com/vuejs/eslint-plugin-vue/issues/462
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: String,
required: true
}
},
methods: {
linkProps(url) {
if (isExternal(url)) {
return {
is: 'a',
href: url,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'router-link',
to: url
}
}
}
}
上述方式打开了一个新的使用方式,这样的好处,不需要使用if/else进行处理,还可以减少一个多余的标签【root element】。但是会有一些语法提示错误,虽然添加了eslint-disable来禁止,但还是不行,而且有些不似vue的用法
改造开始
版本一 非函数式组件 【Link.vue】
import { isExternal } from '@/utils/validate'
export default {
name: 'Link',
props: {
to: {
type: String,
required: true
}
},
render(h) {
if (isExternal(this.to)) {
return h(
'a',
{
attrs: {
target: '_blank',
rel: 'noopener',
href: this.to
}
},
this.$slots.default
)
} else {
return h('router-link',
{
props: {
to: this.to
}
},
this.$slots.default
)
}
}
}
主要是slot如何处置比较好,其他都好处理,而且使用slot有两种方式 插槽
方式一
this.$slots.default
方式二
this.$scopedSlots.default()
版本二 函数式组件 【Link.vue】
import { isExternal } from '@/utils/validate'
export default {
name: 'Link',
functional: true,
props: {
to: {
type: String,
required: true
}
},
render(h, context) {
console.log(context)
const { props, scopedSlots } = context
const { to } = props
if (isExternal(to)) {
return h(
'a',
{
attrs: {
target: '_blank',
rel: 'noopener',
href: to
}
},
scopedSlots.default()
)
} else {
return h('router-link',
{
props: {
to: to
}
},
// scopedSlots.default()
context.children
)
}
}
}
对于上述两种实现方式,大致相同,有一些细节需要注意
functional: true 添加这个后,只能通过 context来进行上下文关联,而无法调用this,同时这种方式会快一些,只是在使用slot时,会有两种形式link
this.$slots.default 更新为 context.children
scopedSlots.default() 这种方式依旧在
当时用functional: true,文件名便可以改为js为后缀了,若依旧使用vue时,便需要 进行包裹了
总结
render函数更多是,很多细节不能使用语法糖来进行处理,导致使用起来不顺手
slot插槽这块还是很有用的,只是文档说明等没有前面的那么详细了
通过上述方式,便发现原来可以这么玩,而且细粒度已经都要一层标签了,若使用原来的方式,root element怕是就够处理好一会儿了
vue 渲染函数处理slot_vue render 渲染函数相关推荐
- cpu渲染测试软件,CPU多核渲染大比拼 Corona 引擎测试
Corona测试理顺平台 提到处理器的综合性能,硬件爱好者们会想到各种各样的测试软件--喜好游戏的,3Dmark见真章:工作需要转码的,各种X264\H265 Benchmark都能满足需要:喜欢研究 ...
- Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue render 渲染html,详解vue渲染函数render的使用
1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如 ...
- Vue render渲染函数
这里写自定义目录标题 Vue render渲染函数 基础 render渲染函数的作用 render函数讲解 render和template的区别 render举例 Vue render渲染函数 基础 ...
- iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍 字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...
- 【前端基础知识】最基础的render渲染函数知识,一看就会
Vue-Render渲染函数 是什么? 如何使用? 1. createElement的第一个参数 1.1 HTML 标签名(可以动态创建标签) 1.2 组件 2. createElement的第二个参 ...
- 【vue3】vue3在setup的render渲染函数中如何使用slots(插槽)?
在setup中使用插槽,需要配合render渲染函数,先上代码. 子组件slotsTest.vue: <script lang="ts"> import { h,ren ...
- vue3.0中使用render渲染函数渲染组件或标签
使用 render 渲染函数是使用了 js 来渲染组件或标签 而我们平时使用时是直接在 template 标签中直接书写 这两种方法都可以实现组件或标签的创建 下面是使用 render 渲染的方法 i ...
- 二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么 具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
最新文章
- 发明 AI 吵架神器?程序员对象这么厉害的吗?
- autotools入门笔记(二)——创建和使用静态库、动态库
- 员工任务管理系统c语言,C语言职工信息管理系统课程设计任务书.docx
- 【Python】导入资源管理器的文件列表(计算文件和文件夹大小)
- 苹果MacBook Air 2018款少量用户会出现主板问题可免费更换
- ArcGIS JavaScript在线编辑
- 爆一个VS2015 Update1更新带来的编译BUG【已有解决方案】
- 记使用sed的一次坑
- linux c 静态连接,Linux cmake 静态链接boost
- linux红帽认证考试费,红帽rhce认证考试费用是多少?
- Android窗口被隐藏了怎么办,Android studio中IDE窗口怎么显示或者隐藏?
- c语言中指数常量注意什么意思,C语言入门知识:常量
- 两台电脑如何共享文件
- vue 整合百度地图
- igraph 牛刀小试
- 超萌小萝莉因为不好好吃饭向妈妈道歉,超可爱!
- stormzhang的自我介绍
- 用DIV+CSS技术设计的凤阳旅游网站(web前端网页制作课作业)HTML+CSS+JavaScript
- (转载)Everynes NES Hardware Specifications
- vue滚动条插件vue-happy-scroll
热门文章
- 【操作系统复习】进程的状态与转换
- 前端调用后端接口的错误(400)
- 计算机网络——CSMA/CD最小帧长相关题目
- 联想e480一键恢复小孔_联想电脑如何一键恢复系统
- Halcon算子学习:smooth_object_model_3d
- 数据结构之DFS与BFS实现
- Python 大规模异步新闻爬虫、google翻译、百度翻译、有道翻译、百度指数
- Redis系列五、redis的五种数据结构和相关指令之Set
- 佳能g2810打印机扫描怎么用_办公用这款佳能彩色激光打印机无线MF643CDW就够了!...
- 夏普linux掌上电脑,夏普展示Ubuntu系统NetWalker PC-Z1[图文]