vue $attrs $listeners 多层嵌套组件传参 多层嵌套组件触发事件

一般，组件都会嵌套，而我们知道常用的父子组件传参通过props，vuex，eventBus等。。。

但是，props只是适用了父子，但是 孙组件 如何到父组件呢？，有一些小项目，整个项目我就只有这么一个需求，，不可能为了这个就用了vuex吧，这样总觉得不对，

一级一级往上传，孙传子，子传父，也比较难以维护，所以我个人也不建议

 

在vue 2.4版本，vue 增加了$attrs  $listeners  ，具体怎么用呢，大家可以去官网看看，我这里只说解决我上面提出的问题、

直接上代码：

定义a组件，b组件，c组件，a嵌套b,b嵌套c，如何将 c 组件的参数传到a组件呢？

a组件:

<template>
  <div class="hello">
    <bbb @refresh="refresh"></bbb>
  </div>
</template>

<script>
import bbb from "./b";
export default {
  data() {
    return {};
  },
  components: {
    bbb
  },
  methods:{
      refresh(){
          console.log("触发了refresh")
      
      }
  }
};
</script>

　　b组件：

<template>
  <div class="hello">
    <ccc v-bind="$attrs" v-on="$listeners"></ccc>
  </div>
</template>

<script>
import ccc from "./c";
export default {
  data() {
    return {};
  },
  components: {
    ccc
  }
};
</script>

　　c组件：

<template>
  <div class="hello">
    <button @click="clickHandle">触发refresh</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    clickHandle() {
      console.log("9");
      this.$emit("refresh");
    }
  }
};
</script>

　　而我在HelloWorld.vue文件中引用a组件

HelloWorld.vue：

<template>
  <div class="hello">
    <aaa @refresh="refresh"></aaa>
  </div>
</template>

<script>
import aaa from './a'
export default {
  
  data () {
    return {
     
    }
  },
  mounted(){
    console.log("sss222",this.$listeners)
  },
  methods:{
    refresh(){
      console.log("触发refresh")
      console.log("sss",this.$attrs)
    }
  },
  components:{
    aaa
  }
}
</script>

　　点击，效果如同下面：

 

  但是我开始的时候在HelloWorld 中也写了跟 a 组件 一样的触发事件，但是却没有可以触发，所以，我这个解决的办法也就 三层， 到了嵌套四层的话，就不行了，，，

所以当嵌套到4层的时候，怎么解决呢？懂的话，就告诉我吧，阿里嘎多