Vue recursive scoped slots

by simati

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h3>Custom template</h3>
  <recursive-item :lvl="1">
    <template scope="props">
      Custom: {{props.lvl}}
    </template>
  </recursive-item>
  <h3>Default template</h3>
  <recursive-item :lvl="1">
  </recursive-item>
</div>

<script type="text/x-template" id="recursive-item-tmpl">
  <ul v-if="lvl < 4">
  	<li>
    	<slot :lvl="lvl">:(((</slot>
      <recursive-item :lvl="lvl+1">
      	<template scope="_">
        	<slot :lvl="_.lvl">Level: {{_.lvl}}</slot>
        </template>
      </recursive-item>
    </li>
  </ul>
</script>

JavaScript

Vue.component('recursive-item', {
  template: '#recursive-item-tmpl',
  props: ['lvl']
})

new Vue({ el: '#app' })