deliver two depth event from parent

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <one-depth
    v-on:parent-method="parentMethod"
  ></one-depth>
</div>

<template id="one-depth">
  <div>
    <button @click="$emit('parent-method', 'I am one depth')">One</button>
    <two-depth
      v-on:parent-method="$emit('parent-method', 'I am two depth')"
    >
      One Depth Button
    </two-depth>    
  </div>
</template>

<template id="two-depth">
  <button v-on:click="$emit('parent-method')">
    Two Depth Button
  </button>
</template>

JavaScript

var twoDepth = Vue.component('two-depth',{
	template: '#two-depth'
})
var oneDepth = Vue.component('one-depth',{
	template: '#one-depth',
  components: {
		twoDepth
  }
})


var app = new Vue({
	el: '#app',
  methods: {
  	parentMethod: function (msg) {
    	window.alert(msg);
    }
	}
})