When we write vUE components, we may use data passing; Pass the parent component’s data to the child component, sometimes also need to trigger the parent component’s event through the child component;

Whenever we encounter such a need, we always think of three solutions:

  1. Pass to child components (parent and child components) as props

  2. Vuex State management (parent and non-parent components) VUEX

  3. The communication of non-father-child components transmits Vue Event Bus. Using Vue instances, events are monitored and issued to realize the transmission between components.

While traveling around the neighborhood, I noticed a fourth way to use inheritAttrs + $attrs + $listeners

Attached are links to the latest additions to Vue2.4, attrs and Listeners’ best practices on vue.js

Basically, most companies or projects use the first two, and our company is no exception. I seem to have read that vuex is suitable for large projects. The third method I used in my graduation project, but I don’t think I have seen it anywhere else so far. At that time, there was only one function that needed to transfer data between sibling components, which was overkill with Vuex, plus the time cost. So I chose Vue Event Bus; The last one I haven’t seen applied to the project yet. But I personally feel that if there is an API there must be a reason for its existence. Why else would it exist? If there is a need, I personally think I can try to use it; Embrace change, embrace opportunity

After work, I found that sometimes the conventional way is not necessarily the best way to deal with bugs. Think outside the box, think outside the box to solve a problem, may be better. Conventional methods can solve the problem but are too bloated. The experience is more interesting in the practice of pit mining

inheritAttrs + $attrs + $listeners

InheritAttrs: The default is true

My interpretation is that no parent component property inherited by a quilt component is displayed as a property on the child component root element. It sounds like a mouthful, but look at the screenshot and see the code

inheritAttrs :false

inheritAttrs :false

Attribute Bindings that are not recognized as props in parent scopes by default are “rolled back” and applied to root elements of child components as normal HTML features. This may not always behave as expected when writing a component that wraps one target element or another. These default behaviors are removed by setting the inheritAttrs to false. These features are enabled by the instance attribute $attrs (also new in 2.4), and can be explicitly bound to non-root elements by V-bind.

$attrs

Store data objects that are not inherited by the quilt component; Look at the map

Contains feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and internal components can be passed in via V-bind =”$attrs” — useful when creating higher-level components.

$listeners

Child components can trigger events for parent components (no need to use those pesky vuex or an empty Vue instance as an event bus, or vm.$on).

Contains v-ON event listeners in the parent scope (without the.native modifier). Internal components can be passed in via V-on =”$Listeners “– useful for creating higher-level components.

One final conclusion

I’ll fill in the examples later