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>
