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. 成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'minimatch'

    成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'minimatch' 解决办法 npm i ...

  2. sqli-labs(44)

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

  3. 分布式-信息方式-ActiveMQ支持的传输协议和配置

                             ActiveMQ支持的传输协议和配置■ Connector: ActiveMQ提供的,用来实现连接通讯的功能.包括: client-to-broker ...

  4. leetcode 148排序链表

    优先队列容器,使用小顶堆排序:timeO(nlogn) spaceO(n) /** * Definition for singly-linked list. * struct ListNode { * ...

  5. dvm 的进程和 Linux 的进程, 应用程序的进程是否为同一个概念?

    dvm 指 dalvik 的虚拟机. 每一个 Android 应用程序都拥有一个独立的 Dalvik 虚拟机实例,应用程序都在它自己的进程中运行.而每一个 dvm 都是在 Linux 中的一个进程,所 ...

  6. ArcGIS客户端API中加载大量数据的几种解决办法

    ArcGIS客户端API中加载大量数据的几种解决办法 2011-03-25 18:17 REST风格的一切事物方兴未艾,ArcGIS Server的客户端API(Javascript/Flex/Sil ...

  7. django 如何传递id 参数

    urls.py  注意这里的bid

  8. 如何实现在Eclipse导入c3p0

    1 右键项目->Properties->Java Build Path->Libraries->Add External JARs...-> c3p0-0.9.5.2.j ...

  9. Private Variable

    Any variable defined inside a function is considered private since it is inaccessable outside that f ...

  10. JSP指令标签、动作标签

    JSP有三大指令: * page指令   * include指令   * taglib指令    在JSP中没有任何指令是必须的!!! 但基本上每个JSP都是使用page指令! page指令 page ...