Apprenez à connaître les attributs $attrs et $listeners dans vue et parlez de leur utilisation

Cet article vous présentera les outils puissants pour encapsuler des composants dans vue : les attributs $attrs et $listeners, et verra comment ils sont utilisés. J'espère que cela sera utile à tout le monde !

Lorsque l'imbrication de composants à plusieurs niveaux doit transmettre des données, la méthode généralement utilisée consiste à utiliser vuex. Mais le simple transfert de données sans traitement intermédiaire et l'utilisation de vuex pour le traitement sont excessifs. Il y a donc deux attributs : $attrs et $listeners, qui sont généralement utilisés avec EnsureAttrs. [Recommandations associées : tutoriel vidéo vuejsvuex。但仅仅是传递数据，不做中间处理，使用 vuex 处理，未免有些大材小用了。所以就有了 $attrs 、 $listeners两个属性 ，通常配合 inheritAttrs 一起使用。【相关推荐：vuejs视频教程】

$attrs

• 从父组件传给自定义子组件的属性，如果没有 prop 接收会自动设置到子组件内部的最外层标签上，如果是 class 和 style 的话，会合并最外层标签的 class 和 style。
• 如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承，然后通过 v-bind="$attrs" 把外部传入的 非 prop 属性设置给希望的标签上，但是这不会改变 class 和 style。

inheritAttrs 属性

2.4.0 新增

官网链接 https://cn.vuejs.org/v2/api/#inheritAttrs

• 类型：boolean

• 默认值：true

• 详细：

  默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

  注意：这个选项不影响 class 和 style 绑定。

例子：

父组件

<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"这个属性，他会自动接受并绑定

inheritAttrs: false

inheritAttrs: true

$listeners (官网解释)

• listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

先上代码：这里只举例focue、input两个原生事件

// 父组件
<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>

// 子组件
<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>

这样绑定原生事件很麻烦，每一个原生事件都需要绑定，但用v-on="$listeners"]

$ attrs

• Les attributs transmis du composant parent au composant enfant personnalisé seront automatiquement définis sur la balise la plus externe à l'intérieur du composant enfant si aucun prop n'est reçu pour <. code>class et style, la class et le style de la balise la plus externe seront fusionnés.
• Si le composant enfant ne souhaite pas hériter des attributs non-prop transmis par le composant parent, vous pouvez utiliser inheritAttrs pour désactiver l'héritage, puis passez v-bind ="$attrs" définit les attributs non-prop passés en externe sur la balise souhaitée, mais cela ne changera pas la class</code > et <code>style< /code>. </li></ul><p><strong><span style="font-size: 18px;">attribut inheritAttrs</span></strong></p><blockquote><p>2.4.0 ajouté <a href="https://www.php.cn/vuejs/" target="_blank" textvalue="vuejs教程"></a>lien du site officiel https ://cn.vuejs.org/v2/api/#inheritAttrs<a href="https://www.php.cn/course/list/1.html" target="_blank"></blockquote><ul><li></a><strong>Type</strong> : <code>booléen

< li>🎜Valeur par défaut : true🎜
• 🎜Détails : 🎜🎜Par défaut, la portée parent n'est pas Attribute les liaisons reconnues comme accessoires « retomberont » et seront appliquées comme attributs HTML normaux à l'élément racine du composant enfant. Lors de l'écriture d'un composant qui encapsule un élément cible ou un autre composant, cela peut ne pas toujours être conforme au comportement attendu. En définissant inheritAttrs sur false, ces comportements par défaut seront supprimés. Ces attributs peuvent être rendus effectifs via la propriété d'instance (également nouvelle dans la version 2.4) et peuvent être explicitement liés à des éléments non racine via v-bind . 🎜🎜Remarque : Cette option n'affecte pas les liaisons class et style. 🎜

🎜Exemple : 🎜🎜Composant parent🎜

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

🎜Composant enfant🎜rrreee🎜Composant enfant n'accepte pas la valeur transmise par le composant parent, et n'est pas non plus liée, mais avec l'attribut v-bind="$attrs", il l'acceptera et la liera automatiquement 🎜🎜inheritAttrs: false🎜🎜 🎜🎜inheritAttrs : true 🎜🎜🎜

$listeners (Explication du site officiel)

• listeners : contient le contenu dans la portée parent (à l'exclusion de .native code> décorateur) Écouteur d'événement <code>v-on. Il peut être transmis aux composants internes via v-on="$listeners" - très utile lors de la création de composants de niveau supérieur.

🎜Commençons par le code : voici seulement deux exemples d'événements natifs, focue et input🎜rrreeerrreee🎜C'est très compliqué de lier des événements natifs des événements comme celui-ci, chacun Tous les événements natifs doivent être liés, mais utiliser v-on="$listeners" évitera beaucoup de problèmes🎜rrreee🎜Cette seule ligne de code peut résoudre le problème de liaison tous les événements natifs🎜🎜【Recommandations associées : "🎜tutoriel vuejs🎜", "🎜web front-end🎜"]🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!