Verwendung von Provide und Inject in Vue

provide und inject sind Methoden zum Teilen von Daten in Vue.js: Provide() stellt Daten in der übergeordneten Komponente bereit. inject() ruft die von der übergeordneten Komponente bereitgestellten Daten in der untergeordneten Komponente ab. Funktionen: Daten reagieren und fließen bei Bedarf an den gewünschten Ort, ohne dass Requisiten explizit übergeben werden müssen.

Bereitstellen und Injizieren in Vue.js

Frage: Was sind Bereitstellen und Injizieren in Vue.js?

Antwort: provide und inject sind zwei globale Methoden in Vue.js, die zum Austausch von Daten zwischen verschiedenen Komponenten verwendet werden.

Details:

provide

• wird in einer übergeordneten Komponente verwendet, um Daten für ihre untergeordneten Komponenten bereitzustellen.
• Verwenden Sie die Methode „prove()“ in der Methode „setup()“ oder „created()“ der übergeordneten Komponente, um Daten bereitzustellen.
• Die verwendete Syntax: provide('propertyName', value)provide('propertyName', value)

inject

• 用于在子组件中从父组件获取数据。
• 在子组件的 setup() 方法中使用 inject() 方法获取数据。
• 使用的语法：const propertyName = inject('propertyName')

inject

wird verwendet, um Daten von der übergeordneten Komponente in der untergeordneten Komponente abzurufen.
1. Verwenden Sie die inject()-Methode in der setup()-Methode der Unterkomponente, um die Daten abzurufen.

Verwendete Syntax: const propertyName = inject('propertyName')

Verwendung:

Verwenden Sie in der übergeordneten Komponente die Methode Provide(), um Daten bereitzustellen:

<code class="javascript">// 父组件
export default {
  setup() {
    provide('sharedData', {
      message: 'Hello, world!'
    })
  }
}</code>

Verwenden Sie in einer untergeordneten Komponente die inject()-Methode, um Daten abzurufen:

<code class="javascript">// 子组件
export default {
  setup() {
    const sharedData = inject('sharedData')
    console.log(sharedData.message) // 输出: "Hello, world!"
  }
}</code>

🎜Funktionen: 🎜🎜🎜🎜bereitstellen und injizieren, sodass Daten bei Bedarf an die gewünschte Stelle im Komponentenbaum fließen können. 🎜🎜Sie können verwendet werden, um Status, Konfigurationselemente oder andere Daten zu teilen, ohne explizit Requisiten von Komponente zu Komponente weiterzugeben. 🎜🎜Die freigegebenen Daten reagieren. Wenn sie sich in der übergeordneten Komponente ändern, wird die untergeordnete Komponente automatisch aktualisiert. 🎜🎜

Das obige ist der detaillierte Inhalt vonVerwendung von Provide und Inject in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!