官网链接vm.$slots
简而言之:$slots
是一个插槽用来预留位置,default
则是指除了具名插槽以外的所有内容。
常用于渲染函数,那下面来看一个在渲染函数中使用的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染函数</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<anchored-heading :level="2">Hello world!</anchored-heading>
</div>
<script>
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
效果: