slots test

by Nan Xiang

HTML

<div id="app">
  <anchored-heading :level="2">
    <aaa></aaa>
    <bbb slot="bbb" msg="slot-1"></bbb>
    <bbb slot="bbb" msg="slot-2"></bbb>
    <ccc slot="ccc"></ccc>
  </anchored-heading>
</div>

JavaScript

Vue.component('aaa', {
  functional: true,
  render: function (h, ctx) {
    return h('div',['aaa'])
  },
})
Vue.component('bbb', {
  functional: true,
  render: function (h, ctx) {
    return h('div',['bbb:'+ctx.props.msg])
  },
})
Vue.component('ccc', {
  functional: true,
  render: function (h, ctx) {
    return h('div',['ccc'])
  },
})
Vue.component('anchored-heading', {
  functional: true,
  render: function (h, ctx) {
    console.log(ctx.children)
    console.log(ctx.slots())
    return h(
      'h' + ctx.props.level,   // tag name 标签名称
      // ctx.slots().ccc
      ctx.children // 子组件中的阵列
    )
  },
})
var app = new Vue({
}).$mount('#app')