Scoped Slots

Vue Scoped Slots example.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
   <item v-for="item in items" :item="item">
     <template slot-scope="product">
       {{ product.name }} {{ product.qty > 0 ? product.price : 'Out of Stock' }}
     </template>
   </item>
</div>

JavaScript

Vue.component('item', {
	template: `<div>
  		<slot v-bind="item">{{ item.name }}</slot>
  </div>`,
  props: ['item']
});

new Vue({
	el: '#app',
  data() {
  	return {
    	items: [
      	{ name: 'Item 1', price: 900, qty: 30 },
        { name: 'Item 2', price: 1200, qty: 0 },
        { name: 'Item 3', price: 1500, qty: 11 }
      ]
    }
  }
});