A是父组件, B是子组件 ,C孙子组件 当我们A 向 C 传值的时候我们有几种方式 01: A父组件 => b子组件 => C子组件 02: VUEX 03: $listeners
根组件
<template> // v-on="$listeners", 子组件获取根组件绑定的事件 <slot-main v-on="$listeners" @rootFn1="rootFn1" @rootFn2="rootFn2" > </slot-main> </template> <script> export default { components: { slotMain: () => import('./views/slotMain') }, methods:{ rootFn1(arg) { console.log(arg) }, rootFn2(arg) { console.log(arg) }, } } </script>父组件 slot-main
<template> // v-on="$listeners", 孙子组件可获取根组件和父组件绑定的事件 <sub-slot-main v-on="$listeners" @fatherFn1="fatherFn1" ></sub-slot-main> </template> <script> export default { mounted() { this.$nextTick(() => { console.log(this.$listeners) // 根组件: 绑定的事件列表 {rootFn1:function(){....}, rootFn2:function(){....} } this.$listeners.rootFn1('参数') // 类似$emit触发 }) }, components: { subSlotMain: () => import('./subSlotMain.vue') }, methods: { fatherFn1(arg) { console.log(arg) }, fatherFn2(arg) { console.log(arg) } } } </script>孙组件 sub-slot-main
<template> <h4>孙子组件</h4> </template> <script> export default { mounted() { console.log(this.$listeners) // { rootFn1:function(){....}, rootFn2:function(){....}, fatherFn1:function(){....} } this.$emit('rootFn1', '孙子组件,触发根组件') //孙子组件直接$emit根组件事件 } } </script>