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 lang='zh'>
<head>
  <title></title> 
</head>
<body>
  <div id="app">

  <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>
posted @ 2017-05-26 17:42  LisPythoniC  阅读(2012)  评论(1)  编辑  收藏  举报