const CompA = Vue.extend({
  template: `<div>
		底层：
    <span v-text="count"></span>
    <button @click="increase">+</button>
  </div>`,
  props: ['count'],
  methods:{
    increase () {
      this.count++
    }
  }
})

const CompB = Vue.extend({
  template: `<div>
		中间层：
    <span v-text="count"></span>
    <button @click="increase">+</button>
    <comp-a :count="count"/>
  </div>`,
  props: ['count'],
  components: {
    compA: CompA
  },
  methods:{
    increase () {
      this.count++
    }
  }
})

const CompC = Vue.extend({
  data () {
    return {
      count: 0
    }
  },
  template: `<div>
		顶层：
    <span v-text="count"></span>
    <button @click="increase">+</button>
    <comp-b :count="count"/>
  </div>`,
  components: {
    compB: CompB
  },
  methods:{
    increase () {
      this.count++
    }
  }
})

new Vue({
  el: "#demo",
  components: {
    compC: CompC
  },
  template: `<comp-c />`
})