Was ist Provide & Inject in Vue und wie wird es verwendet?

Vue.js ist ein sehr beliebtes JavaScript-Framework in der aktuellen Front-End-Welt. Es verfügt über viele hervorragende Funktionen wie reaktionsfähige Datenbindung, komponentenbasierte Ansichtsarchitektur, Abhängigkeitsverfolgung und Vorlagenrendering. Die am häufigsten verwendete Funktion ist die Komponentenprogrammierung, die uns Funktionstests wie Komponentenregistrierung, Komponentenparameterübergabe usw. bietet. In einigen Fällen kann die Übertragung von Komponentendaten jedoch auf schwierigere Probleme stoßen die in Vue bereitgestellten provide und inject, um diese Art von Problem zu lösen. provide 和 inject 解决这类问题。

理解 provide & inject

provide

Vue2.2.0 版本新增了 provide / inject ， 其能够更好的帮助我们完成面向对象编程的需求。通俗的讲 provide 就是我们可以在父组件中提供数据，然后再子组件中使用 inject 来获取所需要的数据的一个过程。

提供一个例子来更好的理解 provide ：

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

在父组件中，我们向下提供了一个键为 foo 的数据给到子组件中。随后在子组件中我们我可以通过 inject 来获取这份数据。

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

到这里，我们就实现了提供和注入的完整过程。通过 provide 我们在父组件中提供数据，随后再子组件中使用 inject 来获取数据，从而完成了组件之间的数据传递。

inject

inject 是一个数组，列表中声明要注入的属性名。在子组件注入一个对象，该对象的属性名与提供的键名相同，值为提供的数据。

提供一个具体的事例来理解 inject ：

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

以上代码中，provide 函数可以理解为父组件向下层子组件提供数据，子组件再通过 inject 来接收这份数据，实现了数据的传输过程。

使用场景

此时，你可能会问：我们已经有了 props 父子组件之间的通信了，为什么还需要 provide/inject 呢？

其实，这两者在使用场景上是不太相同的。以下是一些可使用 provide/inject 实现父子组件通信的一些场景：

1. 跨级组件间的通信

在 Vue 中，父子组件之间的通信可以通过 props 实现，但是当跨级组件时，使用 props 传递数据将会变得非常繁琐。而此时可以通过 provide / inject 方式，在祖先组件中提供数据，然后在子孙组件中通过 inject 获取所需数据。

2. 父组件不清楚具体的子组件实现

在某些情况下，父组件并不清楚子组件内部的数据具体存放在哪个 props 中，而此时可以通过 provide 的方式将数据传递到子组件中。

3. 可以用一个观察者来观察值的变化，帮助组件集成的实现

通过 provide / inject 方式，我们可以将数据提供给子孙组件，给父级留下观察的入口，从而实现组件集成。

4. 不适合使用 props 时

在 Vue 中，props 是唯一一种官方的、比较好用的、用于父子之间传递数据的方式。但是在某些情况下，如多个子组件希望使用相同的全局变量、提供的公共方法的情况下，就可以使用 provide / inject 方式。

总结

通过本文的介绍，我们了解到了 Vue 中提供的 provide / inject 的基本用法，以及它们的使用场景。

在使用 provide / inject 的过程中，我们需要注意三点：

1. provide / inject 主要用于高阶插件开发，对于开发普通组件的程序员是不需要掌握的。
2. provide 选项应该是一个对象或返回一个对象的函数。这个对象包含可注入其它组件的属性。
3. provide / inject 主要解决的问题是跨层级组件之间的信息传递，常用于插件开发。

最后，当我们遇到跨级组件通信等问题时，就可以使用 provide / inject

Verstehen von Provide & Inject

Provide

Vue2.2.0-Version fügt provide / inject hinzu, was uns besser dabei helfen kann, objektorientierte Programmieranforderungen zu erfüllen. Laienhaft ausgedrückt ist provide ein Prozess, bei dem wir Daten in der übergeordneten Komponente bereitstellen und dann inject in der untergeordneten Komponente verwenden können, um die erforderlichen Daten zu erhalten. 🎜🎜Geben Sie ein Beispiel an, um provide besser zu verstehen: 🎜rrreee🎜In der übergeordneten Komponente stellen wir der untergeordneten Komponente Daten mit dem Schlüssel foo zur Verfügung. Dann können wir diese Daten in der untergeordneten Komponente über inject abrufen. 🎜rrreee🎜Zu diesem Zeitpunkt haben wir den gesamten Prozess der Bereitstellung und Injektion implementiert. Mit provide stellen wir Daten in der übergeordneten Komponente bereit und verwenden dann inject in der untergeordneten Komponente, um die Daten abzurufen, wodurch die Datenübertragung zwischen Komponenten abgeschlossen wird. 🎜

inject

🎜inject ist ein Array und die Liste deklariert die zu injizierenden Eigenschaftsnamen. Fügen Sie ein Objekt in die Unterkomponente ein. Der Eigenschaftsname des Objekts ist derselbe wie der bereitgestellte Schlüsselname und sein Wert sind die bereitgestellten Daten. 🎜🎜Geben Sie ein konkretes Beispiel an, um inject zu verstehen: 🎜rrreee🎜Im obigen Code kann die provide-Funktion als übergeordnete Komponente verstanden werden, die Daten für das untergeordnete Kind bereitstellt Komponente, und die untergeordnete Komponente übergibt dann inject, um diese Daten zu empfangen und den Datenübertragungsprozess zu implementieren. 🎜

Nutzungsszenarien

🎜An dieser Stelle fragen Sie sich vielleicht: Wir verfügen bereits über eine Requisitenkommunikation zwischen übergeordneten und untergeordneten Komponenten. Warum benötigen wir bereitstellen/injizieren? 🎜🎜Tatsächlich unterscheiden sich die beiden in den Nutzungsszenarien erheblich. Im Folgenden sind einige Szenarien aufgeführt, in denen provide/inject verwendet werden kann, um die Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu implementieren: 🎜

1. Kommunikation zwischen ebenenübergreifenden Komponenten

🎜In Vue, Eltern-Kind-Kommunikation zwischen Komponenten kann über Requisiten erreicht werden, aber wenn ebeneübergreifende Komponenten verwendet werden, wird die Weitergabe von Daten mithilfe von Requisiten sehr umständlich. Zu diesem Zeitpunkt können Sie Daten in der Vorgängerkomponente über provide/inject bereitstellen und dann die erforderlichen Daten über inject in der Nachkommenkomponente abrufen. 🎜

2. Die übergeordnete Komponente kennt die spezifische Implementierung der untergeordneten Komponente nicht

🎜In einigen Fällen weiß die übergeordnete Komponente nicht, wo sich die Daten in der untergeordneten Komponente befinden Komponente wird gespeichert, und zu diesem Zeitpunkt können die Daten über provide an die untergeordnete Komponente übergeben werden. 🎜

3. Sie können einen Beobachter verwenden, um Änderungen in Werten zu beobachten, um die Implementierung der Komponentenintegration zu unterstützen

🎜Durch provide/inject Methode: Wir können Daten für untergeordnete Komponenten bereitstellen und dem übergeordneten Element einen Beobachtungseinstiegspunkt hinterlassen, um die Komponentenintegration zu erreichen. 🎜

4. Wenn Requisiten nicht geeignet sind

🎜In Vue sind Requisiten die einzige offizielle und einfach zu verwendende Methode für den Übergang zwischen Eltern und Kind von Daten. Aber in einigen Fällen, etwa wenn mehrere Unterkomponenten dieselben globalen Variablen und bereitgestellten öffentlichen Methoden verwenden möchten, können Sie die Methode provide / inject verwenden. 🎜

Zusammenfassung

🎜Durch die Einleitung dieses Artikels haben wir die grundlegende Verwendung von provide / inject in Vue sowie deren Verwendungsszenarien kennengelernt. 🎜🎜Bei der Verwendung von provide / inject müssen wir auf drei Punkte achten: 🎜

1. provide / inject wird hauptsächlich für hoch- Programmierer, die gewöhnliche Komponenten entwickeln, müssen diese nicht beherrschen.
2. Die Bereitstellungsoption sollte ein Objekt oder eine Funktion sein, die ein Objekt zurückgibt. Dieses Objekt enthält Eigenschaften, die in andere Komponenten eingefügt werden können.
3. provide / inject Das Hauptproblem, das gelöst wird, ist die Informationsübertragung zwischen stufenübergreifenden Komponenten, die häufig in der Plug-In-Entwicklung verwendet wird.

🎜Wenn wir schließlich auf Probleme wie die Kommunikation zwischen Ebenen von Komponenten stoßen, können wir provide / inject verwenden, um das Problem zu lösen, was uns eine bequemere Programmiermethode bietet Dadurch wird unser Code prägnanter und verständlicher. 🎜

Das obige ist der detaillierte Inhalt vonWas ist Provide & Inject in Vue und wie wird es verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!