对于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>