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:

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

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

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>

v-bind="$attrs", it will automatically accept and bind it

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

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

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)"
    />