Vue 中处理跨层级组件通信

对于 A-B-C 三个依此嵌套的组件，现在想把 A 的数据传递给 C，C 的事件被 A 捕获，可以这么实现：

========== A ==========
<template>

  <div>
    CompA
    <comp-b :msg="msg" @clickEvent="handleClick"></comp-b>
  </div>
</template>

<script>
  import CompB from './components/CompB.vue'

  export default {
    components: { CompB },
    data(){
      return {msg:'some msg ...'}
    },
    methods: {
      handleClick(data) {
        alert(data)
      }
    }
  }
</script>

========== B ==========
<template>

  <div>
    CompB
    <comp-c v-on="$listeners" v-bind="$attrs"></comp-c>
  </div>
</template>

<script>
  import CompC from './CompC.vue'

  export default {
    components: { CompC },
  }
</script>

========== C ==========
<template>

  <div @click="clickEvent">CompC: {{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String
      }
    },
    data() {
      return {}
    },
    methods: {
      clickEvent() {
        this.$emit("clickEvent", "I click ...")
      }
    }
  }
</script>