"Front-end Framework-vue-Foundation" $attr and $listeners for communication across multi-level components

Father

Communication between a component and the B component: (Parent-child component)
As shown, a, B, and C three components are nested in turn, according to Vue's development habits, parent-child component communication can be implemented in the following ways:

A to B is passed through the props to the subassembly, B to a is implemented by means of a v-on in a component by $emit in the B component
By setting the global Vuex sharing state, the data is obtained and updated by computed compute properties and commit mutation to achieve the purpose of parent-child component communication.
Vue event Bus, using an instance of Vue, implements monitoring and publishing of events, enabling the delivery of components.
Often the data is met in the first way when it is not necessary to have a global situation and only the parent-child component communicates.

Cross-multilevel

Communication between A and C components: (cross-level component nesting relationships)
For example, A component is a cross-multilevel component nesting relationship between A and C components, and in the past there is a need for communication between the two, often in the following ways:

With the transfer of B components, from top to bottom props, from bottom to top, $emit event delivery, to achieve the effect of cross-level component communication
Global state sharing with Vuex
Vue event Bus, using an instance of Vue, implements monitoring and publishing of events, enabling the delivery of components.

Problem

Obviously, the first way to make the business logic between the components is bloated by props and $emit, and the B component is only acting as a broker. In the case of the second Vuex, it may seem a bit overqualified in some cases (just to implement a data transfer between components, not the concept of data sharing). The use of the third situation found in the actual project operations, such as failure to achieve a good event monitoring and release management, often lead to confusion of data flow, in multi-person collaborative projects, not conducive to project maintenance.

Solution Solutions

In the ABC parent-child grandchild three components, the subcomponents and the code in B resemble the following:

<template> <div class="child-1"> <p>in child1:</p> <p>props: {{pChild1}}</p> <p>$attrs: {{$attrs}}</p> 

The V-bind property is $attr to ensure that the C component is able to obtain the props passed down by the a component (in addition to the attributes declared in the props attribute);

The V-bind property, $listeners, guarantees that the C component can directly invoke the method of the a component.

"Front-end Framework-vue-Foundation" $attr and $listeners for communication across multi-level components