부모 구성 요소 이벤트의 vue 자식 구성 요소 대상 가져 오기

Vue.config.productionTip = false

Vue.component('so-parent', {
  provide() {
    return {
      _tracker: this
    }
  },
  template: `
    <div @mousedown="toggleTrack(true)" @mouseup="toggleTrack(false)"><h3>children count: {{children.length}} - tracking: {{trackState}}</h3><h3>{{tracks}}</h3><slot></slot></div>
  `,
  data() {
    return {
      children: [],
      tracks: [],
      trackState: false
    }
  },
  methods: {
    _registerChild(child) {
      this.children.push(child)
    },
    _registerTracks(track) {
      if (this.trackState) this.tracks.push(track)
    },
    toggleTrack: function(state) {
      this.trackState = state
      if(!this.trackState) {
        this.tracks = []
      }
    }
  }
})

Vue.component('so-child', {
  inject: {
    _tracker: {
      default () {
        console.error('so-child must be child of so-parent')
      }
    }
  },
  data() {
    return {
      childState: false,
      childSeq: 0
    }
  },
  props: ['cid'],
  render(h) {
    return h('div', {
      class: 'child',
      on: {
        mouseover: () => this._tracker._registerTracks(this.cid)
      }
    }, [this.childSeq + ' Child Component ' + this.cid, this.$slots.default])
  },
  mounted() {
    this.childSeq = this._tracker.children.length
    this._tracker._registerChild(this)
  }
})

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

div.child {
  border: 1px solid;
  display: inline-block;
  padding: .5em 1em;
  margin: 0 0.5em 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  &:hover {
    background: #b2bde3;
    cursor: pointer;
    color: white;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <so-parent>
    <so-child cid="A"></so-child>
    <so-child cid="B"></so-child>
    <so-child cid="C"></so-child>
    <so-child cid="D"></so-child>
  </so-parent>
</div>