Vue基于$attrs及$listeners实现隔代通信

所谓隔代通信就是A 与C的通信

A -> B -> C

代码实例 A.vue

  
    
    
    
  




import BChild from "./B.vue";

export default {
  data() {
    return {};
  },
  
  components: { BChild },

  methods: {
    buttonClick() {
      console.log("buttonClick...");
    }
  }
};

B.vue

    
        B组件
        name: {{nameToB}}
        $attrs: {{$attrs}}
        
        
        
        

    



 import CChild from './C.vue';

 export default {
    props: ['nameToB'],
    
    components: { CChild },

    data () {
        return {};
    },

    // inheritAttrs: false,
 };

C.vue

    
        C组件
        name: {{nameToC}}
        $attrs: {{$attrs}}
        点击C按钮
    



    export default {
    // inheritAttrs: false,

        props: ['nameToC'],

        data () {
            return {};
        },
        
        methods: {
            buttonClick(){
                this.$emit('buttonClick');
            }
        }
    };

最终，通过B实现了A与C的通信

参考 Vue v2.4中新增的 a t t r s 及 attrs及 attrs及listeners属性使用教程