vue-3

sub component

by Barry Carter

HTML

<script src="https://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<div id="app">
  <subheader>
    <SaveButton>
    </SaveButton>
    <AddButton />
  </subheader>
</div>

CSS

*{
  font-size: 14px;
}

JavaScript

var SaveButton = Vue.extend({
	template: '<span>Save</span>'
});

var AddButton = Vue.extend({
	template: '<span>Add.</span>'
});

var Subheader = Vue.extend({
	template: '<p>This is parent component.</p><slot></slot>',
  components: {
  	SaveButton
  }
});

Vue.component('savebutton', SaveButton);
Vue.component('addbutton', AddButton);
Vue.component('subheader', Subheader);

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