Use of Vue-$attrs and $listeners
In a company project, it is necessary for the parent component to pass data to the descendant components, not only to the child components, there may be 3 or 4 levels of nesting, or even more. Using props to pass infinitely is obviously a lot more work, and too much nesting may make mistakes. I thought of using $attrs at this time. Similarly, if the descendant component wants to trigger the event of the parent component, you cannot nest infinitely with $emit to start, at this time you can use $listeners.
vm.$attrs
- Type {[key: string]: string}
- Read only
- Details
Contains the feature bindings (except class and style) that are not recognized (and obtained) as props in the parent scope. When a component does not declare any prop, it will include all parent scope bindings (except class and style), and can pass in internal components through v-bind="$attrs"-when creating high-level components very useful.
To put it simply, it contains all the properties set by the parent component on the child component (except for the properties passed by prop, class and style).
Parent component
Subassembly
Sub-components need v-bing="$attrs" to pass the data of $attrs to the next layer of components.
If the subcomponent needs to be used, it can be directly referenced, or the reference can be calculated using the computed attribute.
Sun component
Note that you must register data with calculated attributes. If you simply use orderInfo: this. attrs. order I nfo in data, the data will not respond. After the data of the parent component changes, the descendant components will not change. If attrs.orderInfo is used directly in the html file, the data will not respond. After the data of the parent component changes, the descendant components will not change. If you use it directly in the html fileA T T R & lt S . O R & lt D E R & lt the I n- F O , the number of data is not response to be the , the parent group member of the number of data becomes movable rear , the sub- Sun group members not be changed move . As if H T m L packets member in face direct contact with attrs.orderInfo.XX (the same component as the face), or the response.
I think that data is defined when the component is registered. At this time, it is equivalent to directly defining a dead data for it, and no response data will be given. The calculated attribute will be calculated every time $attrs.orderInfo changes.
vm.$listeners
- Type {[key: string]: Function | Array}
- Read only
- Details
Contains the v-on event listener in the parent scope (without the .native decorator). It can pass in internal components via v-on=" listeners"-very useful when creating higher-level components. To put it simply, it is an object, which contains all the listeners (listening events) acting on this component, which can be passed in to internal components through v − on = "listeners"-very useful when creating higher-level components . To put it simply, it is an object, which contains all the listeners (listening events) acting on this component. You can pass v-on="L I S T E n- E R & lt S " pass into the inner portion of the group member - - In creating build more high- level views of the group members when a non often have a . simple single point speaking it is a th pair of object , in the surface of the package containing the as used in this one group member on that there is aMonitor listening device ( Supervisor listen to what pieces ) , can in order to pass through the v−on=" Listeners" direct event listeners to the child elements in this component (including internal child components).
Parent component
The parent component usage is the same as the value of $emit
Subassembly
If the child component needs to trigger the parent component's event, it is the same as the following grandchild component. I don't have this requirement here. Use v-on to pass $listeners to the next level of components.
Sun component
The event of the parent component is triggered, and then the previous orderInfo information is updated, and then the descendant components are updated through $attrs to achieve data-time linkage.
About inheritAttrs
-
Default value: true
-
Details:
By default, attribute bindings of the parent scope that are not recognized as props will be "retreated" and applied to the root element of the child component as a normal HTML attribute. When writing a component that wraps a target element or another component, this may not always conform to the expected behavior. By setting inheritAttrs to false, these default behaviors will be removed. And through the instance property $attrs (also newly added in 2.4) these attributes can be made effective, and can be explicitly bound to non-root elements through v-bind. -
Note: This option does not affect the binding of class and style.
Borrowing pictures from the Internet, this attribute is true (default), and the $attrs attribute used will be bound to the root element.
Just add inheritAttrs: false here, and the picture above will not appear.
