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怕是就够处理好一会儿了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/503888.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

理发店管理系统java_美容美发店管理系统的设计与实现(JSP,SQLServer)(含录像)

美容美发店管理系统的设计与实现(,SQLServer)(含录像)(开题报告,论文12700字,程序代码,SQLServer数据库)系统功能结构本系统是根据我国美容业的现状及中小型美容院的发展需要进行详细的分析, 对美容院信息管理系统进行合理的设计, 实现集成员工管理、工资…

cpu频率_新版win10修复CPU频率显示不正确的bug

在此前win10 2020年5月更新后,有用户反馈win10任务管理器无法正确显示CPU使用率和频率,比如会出现CPU频率为0.00GHz。现在有外媒报道,微软在win10测试版19042.608中修复了CPU频率显示不正确的bug。这一消息也得到了微软的确认表示已经修复了某…

sap fiori导出列表到excel_介绍一种Fiori标准应用的增强方式

2015年,Jerry还在SAP成都研究院CRM Fiori开发团队工作时,担任了德国一个著名的灯具制造商客户的CRM Fiori项目的dev angel. 当时客户提出了若干对CRM Fiori标准应用的增强需求,总的来说分为前台Fiori UI界面的增强(比如增添新的自定义字段)以…

打桩时不修改源码_考研网上报名点了修改报名,修改后到报名点时,出现部分信息不符合参考条件,请修改或重新报名...

展开全部用户直接填写2113页面底部的黄色显示5261的验证码信息后4102,点击确认1653无误按钮,完成专报名操作,再修改相关信属息即可。但招生单位、考试方式和报考点几项不允许修改,若填写错误,只能再新增一份新的报名信…

ios 图片居中裁剪_[ iOS Shortcuts / Workflow ] 分享一个给照片批量加「底部居中偏上」水印的捷径,可适应不同水印的尺寸...

首先放链接效果示意图捷径特点本捷径的水印位置位于图片底部局中偏上的位置可自适应不同水印的尺寸可多选照片批量操作在加水印操作完成后会弹出预览,完成后点击保存或放弃选择保存后还可选择是否删除原图受益于捷径 app 本身,加水印后的图片分辨率、拍摄…

java检测kafka是否连接成功,kafka代码测试连接

1.发送:package kafka.test;import java.util.Date;import java.util.Properties;import java.util.Random;import kafka.javaapi.producer.Producer;import kafka.producer.KeyedMessage;import kafka.producer.ProducerConfig;public class KafkaProduct {public …

电脑ip地址设置_路由器动态IP和静态IP上网方式怎么设置【设置教程】

在我们设置路由器的过程中,路由器设置界面一般会给我们提供4种上网方式选项,分别是:“让路由器自动选择上网方式(推荐)”、“PPPoE(ADSL虚拟拨号)”、“动态IP(以太网宽带,自动从服务商获取IP地址)”、“静态IP(以太网宽带&#x…

PHP调整图片饱和度,window_Win10系统电脑屏幕的饱和度如何调整?,什么是饱和度? 对电脑来说 - phpStudy...

Win10系统电脑屏幕的饱和度如何调整?什么是饱和度?对电脑来说,饱和度是指色彩的鲜艳程度,也称之为色彩的纯度。Win10系统电脑屏幕的饱和度如何调整?很多朋友都不是很清楚,其实方法很简单的,下面小编就为大家详细介绍…

vue加跨域代理静态文件404_vue-cli 设置跨域代理 线上地址报404

vue-cli 设置跨域代理,本地正常访问,线上地址报404。这是什么原因?vue-cli中跨域代理设置:module.exports {dev: {// PathsassetsSubDirectory: static,assetsPublicPath: /,proxyTable: {/api: {target: https://xxx.xxx-xxx.co…

钉钉关键字回复功能_在家办公首日:钉钉、企业微信集体“崩溃”,只能选择 QQ、微信...

今日是春节假期结束后的第一个工作日,不少企业规定2月3-7日可以在家远程办公。不过尴尬的是,今日上午,钉钉、企业微信等在线办公App集体出现问题。不少网友反馈钉钉出现Bug,“不知道大家工作的怎么样,我的钉钉刚才一直…

hive 配置用户名_配置HiveServer2的安全策略之自定义用户名密码验证

具体从网上看http://doc.mapr.com/display/MapR/UsingHiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication一共提供了三种安全认证方式,我们通常采用的为第三种自定义的方式。To implement custom authentication for HiveServer2, create a custom Auth…

电力系统潮流计算程序 matlab,大神们,求个电力系统潮流计算的matlab程序。

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼ninput(Please input n\n); %n表示系统的节点数d0input(Please input d0\n); %d0表示系统的误差minput(Please inpit m\n); %m表示系统的pq节点的个数p0ones(n-1,1);q0ones(m,1);d1;dpvones(n-1,1);dqvones(m,1);dpzeros(n-1,1);dq…

matlab 数字调制函数,matlab用于数字调制,几个函数的使用问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼help dmodDMODWARNING: This is an obsolete function and may be removed in the future.Please use PAMMOD, QAMMOD, GENQAMMOD, FSKMOD, PSMMODMSKMOD instead.请教FSKMOD中的几个参数应该如何选取!>> help fs…

python决策树 value_机器学习 | 算法笔记(四)- 决策树算法以及代码实现

概述上一篇讲述了《机器学习 | 算法笔记(三)- 支持向量机算法以及代码实现》,本篇讲述机器学习算法决策树,内容包括模型介绍及代码实现。决策树决策树(Decision Tree)在机器学习中也是比较常见的一种算法,属于监督学习中的一种。看字面意思应…

image pil 图像保存_使用PIL保存图像

我正在尝试使用PIL保存我从头开始创建的图像newImg1 PIL.Image.new(RGB, (512,512))pixels1 newImg1.load()...for i in range (0,511):for j in range (0,511):...pixels1[i, 511-j](0,0,0)...newImg1.PIL.save("img1.png")我收到以下错误:Traceback(最…

php布尔类型转为字符串,php将布尔值类型转为了字符串类型,比如传入isAnalog:true,处理后isAnalog:true...

传入参数:{"cpid":"111","ipid":0,"pointType":1,"isAnalog":true,"scpid":"","name":"","alias":"","isArchive":false,"rangeLo…

python自动发送邮件不需要发件邮箱_python使用QQ邮箱实现自动发送邮件

最近用到Python自动发送邮件,主要就是三步,登录邮件、写邮件内容、发送,用到的库是 smtplib 和 email,直接使用pip安装即可我使用的是QQ邮箱,首先需要设置QQ邮箱POP3/SMTP服务记住这个授权码,这个授权码就是…

监听手指是否离开屏幕android_Flutter事件监听

一. 事件监听 在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击、手指滑动、双击、长按等等。所有内容首发于公众号:coderwhy在Flutter中,手势有两个不同的层次:第一层:原始指针事件&#…

matlab二维数组最小值出错,矩阵求最小值问题 问题是: 错误使用空矩形矩阵进行赋值...

我现在有一组数据 当然其实是有很多数据了 已经上万 只截取了其中一部分假设 【X Y W】32.8876000000000 26.6148000000000 1.0101000000000032.9319000000000 28.8627000000000 1.0099600000000032.9803000000000 31.30950000000…

android运行别人的项目_导入他人的Android工程

Android应用界面开发第一章学习第三部分####1.导入其它人创建的Android Studio项目(重点在第二部分)首先将下载的Project压缩包解压到自己的AS工程目录比如:工程目录然后打开AS软件,关闭其它工程(close project),然后准备导入刚才解压的文件夹…