Vue

1、多级数据反向传递 D -> C -> B -> A

• 关键代码

inheritAttrs: false

• A

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

• B

<template>
    <div> B组件
    <CComponent v-bind="$alert" v-on="$listeners" ></CComponent>
    </div>
</template>
<script>
export default {
 name: 'b-component', 
 inheritAttrs: false
}
</script>

• C

<template>
    <div> C组件
    <DComponent v-bind="$alert" 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>