Home > Article > Web Front-end > Get to know the $attrs and $listeners attributes in vue and talk about their usage
This article will take you through vue's powerful tools for encapsulating components: $attrs and $listeners attributes, and see how they are used. I hope it will be helpful to everyone!
When multi-level component nesting needs to pass data, the usually used method is through vuex. But just passing the data without intermediate processing, using vuex for processing, is overkill. So there are two attributes $attrs and $listeners, which are usually used together with inheritAttrs. [Related recommendations: vuejs video tutorial]
prop The reception will be automatically set to the outermost tag inside the subcomponent. If it is class and style, the class of the outermost tag will be merged. and style. prop attributes passed in by the parent component, you can use inheritAttrs to disable inheritance, and then pass v-bind="$ attrs" sets the externally passed in non-prop attributes to the desired tag, but this does not change the class and style. inheritAttrs attribute
2.4.0 Added
official website link https://cn .vuejs.org/v2/api/#inheritAttrs
##Type: boolean
Default value:true
Details:
Default parent role Attribute bindings for fields that are not recognized as props will "fall back" and be applied to the root element of the child component as normal HTML attributes. When writing a component that wraps a target element or another component, this may not always conform to the expected behavior. By settinginheritAttrs to false, these default behaviors will be removed. These attributes can be made effective through the instance property $attrs (also new in 2.4), and can be explicitly bound to non-root elements through v-bind.
does not affect class and style binding.
Example:
Parent component<template>
<my-input
required
placeholder="请输入内容"
type="text"
class="theme-dark"
/>
</template>
<script>
import MyInput from './child'
export default {
name: 'parent',
components: {
MyInput
}
}
</script>Child component<template>
<div>
<input
v-bind="$attrs"
class="form-control"
/>
</div>
</template>
<script>
export default {
name: 'MyInput',
inheritAttrs: false
}
</script> The child component does not accept the value passed from the parent component, nor is it bound, but with the attribute v-bind="$attrs", it will automatically accept and bind it
.native modifiers). It can be passed into internal components via v-on="$listeners" - very useful when creating higher level components. and input<pre class="brush:js;toolbar:false;">// 父组件
<template>
<my-input
required
placeholder
class="theme-dark"
@focue="onFocus"
@input="onInput"
>
</my-input>
</template>
<script>
import MyInput from &#39;./child&#39;
export default {
components: {
MyInput
},
methods: {
onFocus (e) {
console.log(e.target.value)
},
onInput (e) {
console.log(e.target.value)
}
}
}
</script></pre><pre class="brush:js;toolbar:false;">// 子组件
<template>
<div>
<input
type="text"
v-bind="$attrs"
class="form-control"
@focus="$emit(&#39;focus&#39;, $event)"
@input="$emit(&#39;input&#39;, $event)"
/>
</div>
</template>
<script>
export default {
name: &#39;MyInput&#39;,
inheritAttrs: false
}
</script></pre>It’s very troublesome to bind native events like this. Every native event needs to be bound, but using
will save a lot of trouble<pre class="brush:js;toolbar:false;"> <input
type="text"
v-bind="$attrs"
class="form-control"
+ v-on="$listeners"
- @focus="$emit(&#39;focus&#39;, $event)"
- @input="$emit(&#39;input&#39;, $event)"
/></pre>In this way, one line of code can solve the problem of binding all native events
[Related recommendations: "
vuejs tutorial", "web front-end"]
The above is the detailed content of Get to know the $attrs and $listeners attributes in vue and talk about their usage. For more information, please follow other related articles on the PHP Chinese website!