vue root events

by Pooya Parsa

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/x-template"  id="page-component">
<div>
  <button @click="$root.$emit('loading', true)">
    Start Loading
  </button>
  <button @click="$root.$emit('loading', false)">
      Stop Loading
  </button>
</div>
</script>

<script type="text/x-template" id="loading-indicator">
  <div v-if="loading">
  <svg width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-reload" style="background: none;">
    <g transform="rotate(252 50 50)">
      <path d="M50 15A35 35 0 1 0 74.787 25.213" fill="none" stroke="#68d3e6" stroke-width="12"></path>
      <path d="M49 3L49 27L61 15L49 3" fill="#68d3e6"></path>
      <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
    </g>
  </svg>
  </div>
</script>

<div id="app">
  <page-component></page-component>
  <loading-indicator></loading-indicator>
</div>

JavaScript

Vue.component('page-component',{
  template: '#page-component'
})

Vue.component('loading-indicator', {
  template: '#loading-indicator',
  data() {
     return {
       loading: false
     }
  },
  mounted() {
  	this.$root.$on('loading', loading => this.loading = loading)
  }
})

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