vue 2.0 scopedSlots和slots在render函数中的应用示例
渲染内容为:
hello from functional render scopedSlots
render scopedSlots
named slot of render
hello from functional render scopedSlots
functional render scopedSlots
named slot of functional render
源码:
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<div >
<rrr>
<p slot="static"> named slot of render</p>
<template slot="scp" scope="props">
<p>hello from functional render scopedSlots</p>
<p>{{ props.text }}</p>
</template>
</rrr>
<hr>
<fff>
<p slot="static"> named slot of functional render</p>
<template slot="scp" scope="props">
<p>hello from functional render scopedSlots</p>
<p>{{ props.text }}</p>
</template>
</fff>
</div>
<script src="https://cdn.staticfile.org/vue/2.3.2/vue.js"></script>
<script>
Vue.component('rrr', {
render: function (h) {
var children = this.$scopedSlots.scp({text:"render scopedSlots"})
children = children.concat(this.$slots.static)
return h('div',children)
},
})
Vue.component('fff', {
functional: true,
render: function (h, ctx) {
var children = ctx.data.scopedSlots.scp({text:"functional render scopedSlots"})
children = children.concat(ctx.slots().static)
return h('div',children)
},
})
var app = new Vue({
}).$mount('#app')
</script>
</body>
</html>
- 上一篇 »vue-render函数
- 下一篇 »vue iview组件表格 render函数的使用