vue render 渲染函数

经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波

render函数分析

  • 函数式组件
  • 基础的使用方式

针对 Link.vue进行改造

Link.vue

// https://github.com/vuejs/eslint-plugin-vue/issues/462
<template>
<!-- eslint-disable vue/require-component-is -->
<component v-bind="linkProps(to)">
<slot />
</component>
</template> <script>
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
}
}
}
}
</script>

上述方式打开了一个新的使用方式,这样的好处,不需要使用if/else进行处理,还可以减少一个多余的标签【root element】。但是会有一些语法提示错误,虽然添加了eslint-disable来禁止,但还是不行,而且有些不似vue的用法

改造开始

  • 版本一 非函数式组件 【Link.vue】
<script>
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
)
}
}
}
</script>

主要是slot如何处置比较好,其他都好处理,而且使用slot有两种方式 插槽

方式一

this.$slots.default

方式二

this.$scopedSlots.default()
  • 版本二 函数式组件 【Link.vue】
<script>
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
)
}
}
}
</script>

对于上述两种实现方式,大致相同,有一些细节需要注意

  • functional: true 添加这个后,只能通过 context来进行上下文关联,而无法调用this,同时这种方式会快一些,只是在使用slot时,会有两种形式link

    • this.$slots.default 更新为 context.children
    • scopedSlots.default() 这种方式依旧在
  • 当时用functional: true,文件名便可以改为js为后缀了,若依旧使用vue时,便需要<script> export default {}</script> 进行包裹了

总结

  • render函数更多是,很多细节不能使用语法糖来进行处理,导致使用起来不顺手
  • slot插槽这块还是很有用的,只是文档说明等没有前面的那么详细了
  • 通过上述方式,便发现原来可以这么玩,而且细粒度已经都要一层标签了,若使用原来的方式,root element怕是就够处理好一会儿了

vue render 渲染函数的更多相关文章

  1. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  2. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  3. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

  4. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  5. Vue.js 渲染函数, JSX(未掌握,未学完)

    渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...

  6. Vue基础-渲染函数-插槽

    Vue 测试版本:Vue.js v2.5.13 先看个插槽的例子: <div id="app"> <child > <span slot-scope= ...

  7. Vue之render渲染函数和JSX的应用

    一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...

  8. 必备技能三、render渲染函数

    Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...

  9. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

随机推荐

  1. Spring Boot教程(二十九)使用JdbcTemplate操作数据库

    使用JdbcTemplate操作数据库 Spring的JdbcTemplate是自动配置的,你可以直接使用@Autowired来注入到你自己的bean中来使用. 举例:我们在创建User表,包含属性n ...

  2. spark RDD 的基本操作

    好记性不如烂笔头,分享一下 Spark是一个计算框架,是对mapreduce计算框架的改进,mapreduce计算框架是基于键值对也就是map的形式,之所以使用键值对是人们发现世界上大部分计算都可以使 ...

  3. sqli-labs(44)

    第四十四关 本关是基于盲注的,这里盲注主要是要没有报错信息,所以要采用盲注.这关与42关的区别就在于没有报错信息 过滤点: $username = mysqli_real_escape_string( ...

  4. MySQL格式化小数点为百分号并保留2为小数

    #colname为字段名字,CONCAT的作用是把小数点转成百分号,TRUNCATE的作用是保留百分号的小数点成几位 SELECT CONCAT(TRUNCATE(colname*100,2),'%' ...

  5. docker容器的学习

    什么是docker   Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache 2.0 授权协议开源 ...

  6. Unknown tag (s:property)的原因

    今天在做struts2的练习,然后在jsp页面我使用<s:property value="name"/>竟然报错, 然后网上走了下,恍然大悟,我原来没有在jsp页面里面 ...

  7. shiro.ini

    # # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreeme ...

  8. 2018-2019-2 网络对抗技术 20165232 Exp 9 Web安全基础

    2018-2019-2 网络对抗技术 20165232 Exp 9 Web安全基础 实验任务 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS,CSRF) ...

  9. JSP——隐式对象(implicit object)

    Servlet容器将几个对象传递给它所运行的Servlet. 例如,在Servlet的service方法中获得HttpServletRequest和HttpServletResponse,并在init ...

  10. LeetCode 5——最长回文子串

    1. 题目 2. 解答 我们定义状态 state[i][j] 表示子串 s[i, j] 是否为回文子串,如果 s[i, j] 为回文子串,并且有 s[i-1] == s[j+1],那么 s[i-1, ...