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]

$attrs

• Attributes passed from the parent component to the custom child component, if there is no 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.
• If the child component does not want to inherit the non-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 setting

  inheritAttrs 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.

  Note: This option

  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 &#39;./child&#39;
export default {
  name: &#39;parent&#39;,
  components: {
    MyInput
  }
}
</script>

Child component

<template>
  <div>
    <input
        v-bind="$attrs"
        class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: &#39;MyInput&#39;,
  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

inheritAttrs: false

inheritAttrs: true

##$listeners (Official website explanation)

listeners
• : Contains v-on event listeners in the parent scope (excluding .native modifiers). It can be passed into internal components via v-on="$listeners" - very useful when creating higher level components.
Let’s start with the code: here are just two examples of

focue

and input<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 父组件 &lt;template&gt; &lt;my-input required placeholder class=&quot;theme-dark&quot; @focue=&quot;onFocus&quot; @input=&quot;onInput&quot; &gt; &lt;/my-input&gt; &lt;/template&gt; &lt;script&gt; import MyInput from &amp;#39;./child&amp;#39; export default { components: { MyInput }, methods: { onFocus (e) { console.log(e.target.value) }, onInput (e) { console.log(e.target.value) } } } &lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 子组件 &lt;template&gt; &lt;div&gt; &lt;input type=&quot;text&quot; v-bind=&quot;$attrs&quot; class=&quot;form-control&quot; @focus=&quot;$emit(&amp;#39;focus&amp;#39;, $event)&quot; @input=&quot;$emit(&amp;#39;input&amp;#39;, $event)&quot; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: &amp;#39;MyInput&amp;#39;, inheritAttrs: false } &lt;/script&gt;</pre><div class="contentsignin">Copy after login</div></div>It’s very troublesome to bind native events like this. Every native event needs to be bound, but using

v-on="$listeners"

will save a lot of trouble

 <input
        type="text"
        v-bind="$attrs"
        class="form-control"
+       v-on="$listeners"
-       @focus="$emit(&#39;focus&#39;, $event)"
-       @input="$emit(&#39;input&#39;, $event)"
    />

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!