vue 使用 h函数

我的项目前端使用的vben-admin框架。现在有个需求需要在列表中显示一个自定义链接

先贴出做成功的效果如下图。

在做之前通过咨询和搜索得知 可以用vue的h函数来返回一个dom。

那我就去看vue官网对于h函数的说明和示例,大致浏览了一页,感觉还是有点迷糊。然后就搜索查别人使用的示例了。

首先我们需要 知道的是如何在列表中自定义渲染一个列, vbenadmin是基于 ant -design -vue

封装的, ant -design -vue里面有个customRender属性是用来在列表里返回自定义渲染效果的。

然后在customRender函数中使用vue的h函数,我尝试过如下几种写法,最后成功的就是

return h('a', {href:text,text:"文件下载",target:"_blank"});

其他尝试的写法:

return ()=>h('a', text,"文件下载");

return ()=>h('a', {text},"文件下载");

return h('a', {href:text},() =>"文件下载");

return h('a', {href:text},"文件下载");

return () =>h('a', {href:text},"文件下载");

用了上面这么多写法测试,都没有成功,最后再仔细看搜索h用法的示例中别人的说明,包括vue文档的说明,有一段重要的解释:

第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。第二个参数是要传递的 prop,第三个参数是子节点。

当创建一个组件的 vnode 时,子节点必须以插槽函数进行传递。如果组件只有默认槽,可以使用单个插槽函数进行传递。否则,必须以插槽函数的对象形式来传递。

为了方便阅读,当子节点不是插槽对象时,可以省略 prop 参数。

按照上面的解释,第一个参数是原生元素字符串,比如"input" "div"。 我需要用连接就是'a',这个是没错的,那第二个参数是要传递的属性,我开始以为只要传递属性值就可以了,然后仔细看示例发现人家是花括号里面成键值对的描述属性值的,所以我的第二个参数关于链接属性值应该写成 {href:text,text:"文件下载",target:"_blank"}。 而第三个参数说的是子节点,我这里都没有子节点,所以第三个参数不应该出现。

最后结果应该是 return h('a', {href:text,text:"文件下载",target:"_blank"});

还有一点,不太明确的。为什么我开始在h前面加() => 没用呢, 是不是因为外层customRender 他也是函数,所以里面不能再用() =>表达了。

相关推荐
遂心_5 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark5 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_6 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy6 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy6 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼7 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子7 小时前
迭代器和生成器
前端·javascript
洋葱头_8 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing8 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人10 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化