Vue-Komponentenkommunikation: Wie kommuniziert man zwischen übergeordneten und untergeordneten Komponenten?

Vue-Komponentenkommunikation: Wie kommuniziert man zwischen übergeordneten und untergeordneten Komponenten?

Vue ist ein beliebtes JavaScript-Framework, das eine komponentenbasierte Möglichkeit zum Erstellen von Webanwendungen bietet. In der tatsächlichen Entwicklung stoßen wir häufig auf Situationen, in denen eine Kommunikation zwischen übergeordneten und untergeordneten Komponenten erforderlich ist. In diesem Artikel werden einige häufig verwendete Kommunikationsmethoden für übergeordnete und untergeordnete Komponenten in Vue vorgestellt und entsprechende Codebeispiele bereitgestellt.

Props

Props ist die am häufigsten verwendete Kommunikationsmethode zwischen übergeordneten und untergeordneten Komponenten in Vue. Es ermöglicht übergeordneten Komponenten, Daten an untergeordnete Komponenten zu übergeben. In untergeordneten Komponenten werden Requisiten als Array oder Objekt deklariert, das zum Empfangen von Daten verwendet wird, die von der übergeordneten Komponente übergeben werden.

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
};
</script>

Im obigen Beispiel übergibt die übergeordnete Komponente eine Requisite namens message an die untergeordnete Komponente. Die Unterkomponente deklariert über das Props-Array eine Eigenschaft mit demselben Namen, um die übergebenen Daten zu empfangen. In der Vorlage der untergeordneten Komponente können die empfangenen Daten durch den Interpolationsausdruck {{ message }} angezeigt werden.

Emit

Zusätzlich zur Weitergabe von Daten von der übergeordneten Komponente an die untergeordnete Komponente müssen wir häufig auch Daten von der untergeordneten Komponente an die übergeordnete Komponente senden oder ein Ereignis auslösen. Vue bietet untergeordneten Komponenten die Möglichkeit, über Emit mit übergeordneten Komponenten zu kommunizieren.

<!-- 父组件 -->
<template>
  <div>
    <child-component @rating-updated="updateRating"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateRating(rating) {
      // 处理子组件发出的rating更新事件
      console.log('Rating updated:', rating);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    ...
    <button @click="updateRating">Update Rating</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateRating() {
      const rating = 5; // 子组件的评分数据
      this.$emit('rating-updated', rating);
    }
  }
};
</script>

Im obigen Beispiel löst das Schaltflächenklick-Ereignis in der untergeordneten Komponente die updateRating-Methode aus und sendet über dieses.$emit('rating-updated', Rating)-Ereignis und einen benutzerdefinierten Wert namens „

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    Child Component
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called.');
    }
  }
};
</script>

“ an die übergeordnete Komponente hat die Bewertungsdatenbewertung bestanden. Verwenden Sie @rating-updated="updateRating" in der übergeordneten Komponente, um das von der untergeordneten Komponente ausgegebene Rating-Update-Ereignis abzuhören und das Ereignis in der updateRating-Methode zu verarbeiten.

$refs

Manchmal müssen wir direkt von der übergeordneten Komponente aus auf die Eigenschaften oder Methoden untergeordneter Komponenten zugreifen. Vue stellt das Attribut $refs zur Implementierung dieser Direktzugriffsmethode bereit.

<!-- 祖先组件 -->
<template>
  <div>
    ...
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor component!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  components: {
    GrandchildComponent
  }
};
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

Im obigen Beispiel ruft das Schaltflächenklickereignis in der übergeordneten Komponente die Methode callChildMethod auf. Innerhalb der Methode wird this.$refs.childComponent verwendet, um auf die untergeordnete Komponente zuzugreifen und die Methode childMethod der untergeordneten Komponente aufzurufen.

Provide/Inject

Provide/Inject ist eine erweiterte Komponentenkommunikationsmethode, die es Vorgängerkomponenten ermöglicht, Daten an alle Nachkommenkomponenten bereitzustellen, ohne diese explizit Schicht für Schicht weiterzugeben. Diese Kommunikationsmethode eignet sich für die Kommunikation zwischen ebenenübergreifenden Komponenten.

rrreee

Im obigen Beispiel stellt die Vorgängerkomponente über die Bereitstellungsmethode eine Datennachricht mit dem Namen „message“ an die Nachkommenkomponente bereit. Die Enkelkomponente fügt diese Daten über inject: ['message'] ein und zeigt sie mithilfe von {{ message }} in der Vorlage an.

Das Obige stellt die häufig verwendeten Kommunikationsmethoden für Eltern-Kind-Komponenten in Vue vor. Jede Methode hat ihre anwendbaren Szenarien. In der tatsächlichen Entwicklung können geeignete Kommunikationsmethoden entsprechend den spezifischen Anforderungen ausgewählt werden. Ich hoffe, dieser Artikel hilft Ihnen, die Kommunikation von Vue-Komponenten zu verstehen!

Referenzlink:

• [Vue-Dokument – ​​Komponentenkommunikation](https://cn.vuejs.org/v2/guide/components.html#%E7%88%B6%E5%AD%90%E7%BB %84%E4%BB%B6%E9%80%9A%E4%BF%A1)

Das obige ist der detaillierte Inhalt vonVue-Komponentenkommunikation: Wie kommuniziert man zwischen übergeordneten und untergeordneten Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!