Super basic Vue Mixin example

by Admiral Potato

HTML

<script src="https://unpkg.com/vue@2"></script>
<div id="app"></div>

JavaScript

var clickHandlerMixin = {
	template: `
  	<button
    	:style="computedStyle"
    	@click="handleClick(buttonLabel)"
    >{{buttonLabel}}</button>
  `,
	computed: {
  	buttonLabel () {
    	return 'A';
    },
  	computedStyle() {
      return {
      	backgroundColor: '#80f', 
      }
    },
  },
	methods: {
  	handleClick (name) {
    	alert(name);
    }
  }
}

var buttonA = {
	name: 'button-a',
	mixins: [
  	clickHandlerMixin,
  ],
};

var buttonB = {
	name: 'button-b',
	mixins: [
  	buttonA,
  ],
	computed: {
  	buttonLabel () {
    	return 'B';
    },
  	computedStyle() {
      return {
      	backgroundColor: '#f0f', 
      }
    },
  },
};

Vue.component(buttonA.name, buttonA);
Vue.component(buttonB.name, buttonB);

window.vueApp = new Vue({
	el: '#app',
  template: `
  	<div>
    	<h1>Hello.</h1>
      <button-a />
      <button-b />
    </div>
  `
});