Shulou(Shulou.com)06/02 Report--

Vue in the $attrs and $listeners attributes and usage is what, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

When multi-level component nesting needs to pass data, the usual method is through vuex. But just transfer data, do not do intermediate processing, the use of vuex processing, it is somewhat overqualified. So you have two attributes, $attrs and $listeners, which are usually used with inheritAttrs.

$attrs

Properties passed from the parent component to the custom child component are automatically set to the outermost tag inside the child component if there is no prop reception, and the class and style of the outermost tag are merged in the case of class and style.

If the child component does not want to inherit the non-prop attribute passed in by the parent component, you can use inheritAttrs to disable inheritance, and then set the externally passed non-prop attribute to the desired tag with vtalk binding = "$attrs", but this does not change the class and style.

InheritAttrs attribute

2.4.0 New

Official website link https://cn.vuejs.org/v2/api/#inheritAttrs

Type: boolean

Default value: true

Details:

By default, parent-scoped attribute bindings (attribute bindings) that are not considered props will be "fallback" 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 behave as expected. By setting inheritAttrs to false, these default behaviors will be removed. These attribute can be made effective through the instance property $attrs, which is also added in 2.4. and can be explicitly bound to non-root elements through v-bind.

Note: this option does not affect class and style bindings.

Example:

Parent component

Import MyInput from'. / child'export default {name: 'parent', components: {MyInput}}

Sub-component

Export default {name: 'MyInput', inheritAttrs: false}

The child component does not accept the value passed from the parent component, nor is it bound, but there is an attribute of vMub binding = "$attrs", which automatically accepts and binds.

InheritAttrs: false

InheritAttrs: true

$listeners (official website explanation)

Listeners: contains the v-on event listeners in the parent scope (without the .native modifier). It can pass in internal components via vMuon = "$listeners"-- useful when creating higher-level components.

Code first: here are only two native events, focue and input.

/ / parent component import MyInput from'. / child'export default {components: {MyInput}, methods: {onFocus (e) {console.log (e.target.value)}, onInput (e) {console.log (e.target.value)} / / subcomponent export default {name: 'MyInput', inheritAttrs: false}

It's troublesome to bind native events this way. Every native event needs to be bound, but using vMuon = "$listeners" will save a lot of trouble.

This one line of code can solve the problem of binding all native events

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.