知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
基础知识
长列表性能优化
mixin
渲染函数
组件间通信
vue中的柯里化闭包
vue 渲染过程
Vue采用虚拟DOM的目的是什么
keep-alive
nextTick
vue 数组变异
vue-computed原理
vue-router原理
vue-router权限控制
路由懒加载
Vue diff原理
computed如何与视图绑定
scope css
Runtime Only vs Runtime + Compiler
集中变量管理
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
渲染函数
写一个只能通过
level
prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:
1
<
script type
=
"text/x-template"
id
=
"anchored-heading-template"
>
2
<
h1 v
-
if
=
"level === 1"
>
3
<
slot
></
slot
>
4
</
h1
>
5
<
h2 v
-
else
-
if
=
"level === 2"
>
6
<
slot
></
slot
>
7
</
h2
>
8
<
h3 v
-
else
-
if
=
"level === 3"
>
9
<
slot
></
slot
>
10
</
h3
>
11
<
h4 v
-
else
-
if
=
"level === 4"
>
12
<
slot
></
slot
>
13
</
h4
>
14
<
h5 v
-
else
-
if
=
"level === 5"
>
15
<
slot
></
slot
>
16
</
h5
>
17
<
h6 v
-
else
-
if
=
"level === 6"
>
18
<
slot
></
slot
>
19
</
h6
>
20
</
script
>
Copied!
1
Vue
.
component
(
'anchored-heading'
,
{
2
template
:
'#anchored-heading-template'
,
3
props
:
{
4
level
:
{
5
type
:
Number
,
6
required
:
true
7
}
8
}
9
})
Copied!
这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了
<slot></slot>
,在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用
render
函数重写上面的例子:
1
Vue
.
component
(
'anchored-heading'
,
{
2
render
:
function
(
createElement
)
{
3
return
createElement
(
4
'h'
+
this
.
level
,
// 标签名称
5
this
.
$slots
.
default
// 子节点数组
6
)
7
},
8
props
:
{
9
level
:
{
10
type
:
Number
,
11
required
:
true
12
}
13
}
14
})
Copied!
看起来简单多了!
以前
mixin
下一个
组件间通信
最近更新
2yr ago
复制链接