JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script>
<div id="example">
  <wrap-component>
    <template scope="test">
      <child-component></child-component>
    </template>
  </wrap-component>
</div>

JavaScript

// register
var bus = new Vue();

Vue.component('wrap-component', {
  template: `parameter number: {{parameternumber}}
  					 <slot v-for="i in parameternumber"></slot>
             <button @click="addParameter">Add</button>`,
  methods: {
  	addParameter(){
    	this.parameternumber = this.parameternumber + 1;
    }
  },
  data() {
    	return {
      	parameternumber:1,
      };
  },
  created() {
  	console.log('created...');
    var self = this;
    bus.$on('removeparam',function(){
    	self.parameternumber = self.parameternumber - 1;
    })
  },
});
Vue.component('child-component',{
	template:'<div>A label<button @click="remove">X</button></div>',
  methods: {
  	remove() {
    	bus.$emit("removeparam");
    },
  },
})
// create a root instance
new Vue({
  el: '#example',
});