vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
<h1>
<a name="hello-world" href="#hello-world">
Hello world!
</a>
</h1>
对于上面的 HTML,你决定这样定义组件接口
<anchored-heading :level="1">Hello world!</anchored-heading>
当开始写一个只能通过 level
prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:(不使用render)
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>
,在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用 render
函数重写上面的例子:
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
看起来简单多了!这样代码精简很多,但是需要非常熟悉 Vue 的实例 property。在这个例子中,你需要知道,向组件中传递不带 v-slot
指令的子节点时,比如 anchored-heading
中的 Hello world!
,这些子节点被存储在组件实例中的 $slots.default
中。
完整代码:
不使用render:
index.html
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
在要使用的组件template加入
<anchored-heading :level="3">Hello world!</anchored-heading>
在script中加入
components: {
"anchored-heading": {
template: "#anchored-heading-template",
props: {
level: {
type: Number,
required: true,
},
},
},
}
页面效果
使用render:
方法1:
在要使用的组件template加入
<anchored-heading-render :level="1">Hello world!</anchored-heading-render>
在script中加入
import anchoredHeadingRender from "./compontent/anchored-heading-render.vue";
export default {
name: "render-intro",
components: {
"anchored-heading-render": anchoredHeadingRender
}
</script>
anchored-heading-render.vue代码
<script>
export default {
name: "anchored-heading-render",
props: {
level: {
type: Number,
required: true
}
},
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
}
};
</script>
方式2:
在要使用的组件template加入
<anchored-heading-render :level="1">Hello world!</anchored-heading-render>
在script中加入
export default {
name: "render-intro",
components: {
"anchored-heading-render": {
props: {
level: {
type: Number,
required: true,
},
},
render: function (createElement) {
return createElement(
"h" + this.level, // 标签名称
this.$slots.default // 子节点数组
);
},
},
}
</script>
页面效果: