Lernen Sie die Attribute $attrs und $listeners in Vue kennen und sprechen Sie über deren Verwendung

Dieser Artikel führt Sie durch die leistungsstarken Tools zum Kapseln von Komponenten in vue: $attrs- und $listeners-Attribute und zeigt, wie sie verwendet werden. Ich hoffe, dass er für alle hilfreich ist!

Wenn bei der mehrstufigen Komponentenverschachtelung Daten übergeben werden müssen, wird normalerweise vuex verwendet. Aber einfach Daten ohne Zwischenverarbeitung zu übertragen und vuex für die Verarbeitung zu verwenden, ist übertrieben. Es gibt also zwei Attribute: $attrs und $listeners, die normalerweise zusammen mit inheritAttrs verwendet werden. [Verwandte Empfehlungen: vuejs Video-Tutorialvuex。但仅仅是传递数据，不做中间处理，使用 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

• Attribute, die von der übergeordneten Komponente an die benutzerdefinierte untergeordnete Komponente übergeben werden, werden automatisch auf das äußerste Tag innerhalb der untergeordneten Komponente gesetzt, wenn kein prop für class und style werden die class und style des äußersten Tags zusammengeführt.
• Wenn die untergeordnete Komponente die von der übergeordneten Komponente übergebenen Nicht-prop-Attribute nicht erben möchte, können Sie mit inheritAttrs die Vererbung deaktivieren. und dann übergeben v-bind ="$attrs" setzt die extern übergebenen Nicht-prop-Attribute auf das gewünschte Tag, aber dadurch wird classnicht geändert > und style.

inheritAttrs-Attribut

2.4.0 hinzugefügt offizieller Website-Link https ://cn.vuejs.org/v2/api/#inheritAttrs

• Typ: boolean
🎜Standardwert: true🎜
• 🎜Details: 🎜🎜Standardmäßig ist der übergeordnete Bereich kein Attribut Als Requisiten erkannte Bindungen werden „zurückfallen“ und als normale HTML-Attribute auf das Stammelement der untergeordneten Komponente angewendet. Beim Schreiben einer Komponente, die ein Zielelement oder eine andere Komponente umschließt, entspricht dies möglicherweise nicht immer dem erwarteten Verhalten. Durch Festlegen von inheritAttrs auf false werden diese Standardverhalten entfernt. Diese Attribute können über die Instanzeigenschaft (ebenfalls neu in 2.4) wirksam gemacht werden und können über v-bind explizit an Nicht-Root-Elemente gebunden werden. 🎜🎜Hinweis: Diese Option hat keine Auswirkung auf class- und style-Bindungen. 🎜

🎜Beispiel: 🎜🎜Übergeordnete Komponente🎜

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

🎜Untergeordnete Komponente🎜rrreee🎜Untergeordnete Komponente akzeptiert den von der übergeordneten Komponente übergebenen Wert nicht und ist auch nicht gebunden, aber mit dem Attribut v-bind="$attrs" wird er automatisch akzeptiert und gebunden 🎜🎜inheritAttrs: false🎜🎜 🎜🎜inheritAttrs: true 🎜🎜🎜

$listeners (Offizielle Website-Erklärung)

• listeners: Enthält den Inhalt im übergeordneten Bereich (ausgenommen .native code> decorator's) <code>v-on-Ereignis-Listener. Es kann über v-on="$listeners" an interne Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten auf höherer Ebene.

🎜Beginnen wir mit dem Code: Hier sind nur zwei Beispiele für native Ereignisse, focue und input🎜rrreeerrreee🎜Es ist sehr mühsam, native Ereignisse zu binden Ereignisse wie dieses, jedes Alle nativen Ereignisse müssen gebunden werden, aber die Verwendung von v-on="$listeners" erspart Ihnen viel Ärger🎜rrreee🎜Diese eine Codezeile kann das Bindungsproblem lösen alle nativen Veranstaltungen🎜🎜【Verwandte Empfehlungen: „🎜vuejs Tutorial🎜“, „🎜Web-Frontend🎜“]🎜

Das obige ist der detaillierte Inhalt vonLernen Sie die Attribute $attrs und $listeners in Vue kennen und sprechen Sie über deren Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!