JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div id="app">
    <hello :items="items">
        <template slot="bawah" scope="probs">
            <div v-for="item in probs.items">
            {{item.name}}<pre>{{selected}}</pre>
            </div>
        </template>
        <strong>{{name}}</strong>
        <div slot="atas">
            Ni atas
        </div>
    </hello>
</div>

JavaScript

Vue.component('hello', {
	props: ['items'],
	template: '<div><slot name="bawah" :items="items"></slot>. hai from child. My name is <slot name="atas"></slot></div>'
});

var vm = new Vue({
	el: '#app',
    data: {
    	name: 'emi',
        items: [{
        	name: 'a',
        },
        {
        	name: 'b',
        }],
        selected: 'sdf'
    }
})