Vue多级组件之间的方法调用

1.假如在D中想触发A中的handlePreview方法，首先A组件对该方法进行监听
2.在B组件和C组件中设置inheritAttrs为false,不做接收，然后把数据和事件往内部组件接着传
3.到了D组件中，通过$emit触发A组件中的方法，顺利完成我的需求。

以下内容为代码片段（vue语法），大概表述出大概意思。

A组件

<template>
     <div> A组件
     <BComponent @handlePreview="preview"</BComponent>
     </div>
</template>

B组件

<template>
    <div> B组件
    <CComponent v-on="$listeners" ></CComponent>
    </div>
</template>

<script>
export default {
 name: 'b-component', 
 inheritAttrs: false
}
</script>

C组件

<template>
    <div> C组件
    <DComponent v-on="$listeners" ></CComponent>
    </div>
</template>

<script>
export default {
 name: 'c-component', 
 inheritAttrs: false
}
</script>

D组件

<template>
    <div> D组件
    <button @click="handleClick"></button>
    </div>
</template>

<script>
export default {
 name: 'c-component', 
 methods:{
   handleClick(){
   this.$emit('handlePreview')
   }
 }
}
</script>