Bereitstellung und Injektion von Funktionen in Vue3: effiziente Datenübertragung zwischen Komponenten

Die Bereitstellungs- und Injektionsfunktionen in Vue3 sind zur bevorzugten Lösung für eine effiziente Datenübertragung zwischen Komponenten geworden. Sie verwenden einen neuen Mechanismus, der es untergeordneten Komponenten ermöglicht, Daten in Vorgängerkomponenten abzurufen und gleichzeitig Daten in Vorgängerkomponenten in übergeordneten Komponenten zu aktualisieren, was unbegrenzte Möglichkeiten für die Erstellung komplexer und flexibler Anwendungen bietet. In diesem Artikel werden die Bereitstellungs- und Injektionsfunktionen in Vue3 ausführlich erläutert, um den Lesern ein besseres Verständnis ihrer Arbeitsprinzipien und Verwendung zu ermöglichen.

1. Was sind Bereitstellungs- und Injektionsfunktionen?

Die Provide- und Inject-Funktionen sind neue Funktionen in Vue3. Sie bieten eine andere Datenübertragungsmethode als Props und $emit. Die Bereitstellungsfunktion wird zum Bereitstellen von Daten und die Injektionsfunktion zum Einfügen von Daten verwendet. Die Bereitstellungsfunktion empfängt ein Objekt als Parameter, das die Daten enthält, die der untergeordneten Komponente bereitgestellt werden müssen. Die Injektionsfunktion empfängt ein Array oder Objekt als Parameter. Dieses Array oder Objekt enthält die Daten, die von der Vorgängerkomponente eingefügt werden müssen. Es ist zu beachten, dass die Funktionen „Provide“ und „Inject“ nur Daten zwischen derselben Vorgängerkomponente und untergeordneten Komponenten und nicht zwischen Komponenten übertragen können.

2. So funktionieren die Bereitstellungs- und Injektionsfunktionen

In Vue3 verwenden die Bereitstellungs- und Injektionsfunktionen einen neuen Mechanismus, um die Datenübertragung zu erreichen. Dieser Mechanismus basiert auf der benutzerdefinierten Renderfunktion von Vue, die die Verwendung der neuen Kontext-API zum Bereitstellen und Einfügen von Daten ermöglicht.

In der Bereitstellungsfunktion können wir Daten bereitstellen, indem wir das Bereitstellungsattribut festlegen, zum Beispiel:

const app = createApp({
  provide: {
    data: 'this is data'
  }
})

In diesem Beispiel stellen wir Daten in der Stammkomponente mit dem Namen Daten bereit und ihr Wert ist „Dies sind Daten“. Als nächstes können wir die Inject-Funktion in der Unterkomponente verwenden, um diese Daten einzufügen:

const childComponent = {
  inject: ['data'],
  mounted() {
    console.log(this.data)//输出'this is data'
  }
}

In der Unterkomponente injizieren wir Daten über das Inject-Attribut. Dieses Attribut muss den Namen der Daten enthalten, die injiziert werden müssen. Hier fügen wir den Namen der Daten ein. In der untergeordneten Komponente können wir wie Requisiten auf die injizierten Daten zugreifen.

Es ist zu beachten, dass die injizierten Daten undefiniert sind, wenn die Injektionsfunktion in einer untergeordneten Komponente verwendet wird, die Bereitstellungsfunktion jedoch nicht die Daten bereitstellt, die injiziert werden müssen.

3. So verwenden Sie die Provide- und Inject-Funktionen

Bei der Verwendung der Provide- und Inject-Funktionen müssen wir auf die folgenden Punkte achten:

(1) Die Provide- und Inject-Funktionen können nur zwischen demselben Vorfahren weitergegeben werden Komponente und untergeordnete Komponenten Daten können nicht über Komponenten hinweg weitergegeben werden.

(2) Die in der Bereitstellungsfunktion bereitgestellten Daten können beliebigen Typs sein, einschließlich Funktionen, Objekten usw.

(3) Die mit der Injektionsfunktion injizierten Daten sind standardmäßig schreibgeschützt, d. h. die Daten in der Vorgängerkomponente können in der untergeordneten Komponente nicht geändert werden. Wenn Sie die Daten in der Vorgängerkomponente ändern möchten, müssen Sie eine Methode in der Vorgängerkomponente bereitstellen und die Methode in der untergeordneten Komponente aufrufen, um die Daten zu aktualisieren.

(4) Bei der Implementierung der Bereitstellungs- und Injektionsfunktionen können wir den Symboltyp zum Bereitstellen oder Einfügen von Daten verwenden, wodurch verhindert werden kann, dass die Daten versehentlich geändert werden.

(5) Wenn wir Provide zum Bereitstellen von Daten verwenden, können wir die Ref- oder Reactive-Funktion in der Setup-Funktion verwenden, um reaktionsfähige Daten zu erstellen, sodass die Daten direkt in der Unterkomponente verwendet werden können und automatisch auf Datenänderungen reagiert werden können.

Das Folgende ist ein vollständiger Anwendungsfall, der eine einfache TodoList implementiert und die Bereitstellungs- und Injektionsfunktionen zum Übertragen von Daten verwendet:

const todoListProvide = {
  todos: ref([
    { id: 1, text: 'todo 1', done: false },
    { id: 2, text: 'todo 2', done: true },
    { id: 3, text: 'todo 3', done: false }
  ]),
  addTodo (text) {
    this.todos.push({
      id: this.todos.length + 1,
      text: text,
      done: false
    })
  }
}

const todoItemInject = ['todos']

const TodoItem = {
  inject: todoItemInject,
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggleTodo () {
      this.todo.done = !this.todo.done
    }
  },
  template: `
    <li>
      {{ todo.text }}
      <button @click="toggleTodo">{{ todo.done ? 'Undo' : 'Done' }}</button>
    </li>
  `
}

const TodoList = {
  provide: todoListProvide,
  components: {
    TodoItem
  },
  setup() {
    const newTodo = ref('')
    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todoListProvide.addTodo.call(todoListProvide, newTodo.value)
        newTodo.value = ''
      }
    }
    return {
      newTodo,
      addTodo
    }
  },
  template: `
    <div>
      <ul>
        <todo-item v-for="todo in todos" :key="todo.id" :todo="todo"/>
      </ul>
      <div>
        <input type="text" v-model="newTodo">
        <button @click="addTodo">Add Todo</button>
      </div>
    </div>
  `
}

createApp({
  components: {
    TodoList
  },
  template: `
    <todo-list></todo-list>
  `
}).mount('#app')

In diesem Fall definieren wir eine TodoList-Komponente und verwenden sie in dieser Komponente. Die Bereitstellungsfunktion stellt zwei Daten bereit für die todos- und addTodo-Methoden. Unter diesen ist todos ein reaktionsfähiges Array, das zum Speichern aller To-do-Informationen verwendet wird, und die addTodo-Methode wird zum Hinzufügen neuer To-dos verwendet. In der Unterkomponente TodoItem verwenden wir die Funktion inject, um Aufgabendaten einzufügen, und verwenden das Attribut props, um die übergebenen Aufgabendaten zu empfangen. In dieser Komponente definieren wir die toggleTodo-Methode, um den erledigten Status in todo zu aktualisieren, und verwenden dann den todo-Text, die erledigten Attribute und die toggleTodo-Methode in der Vorlage. Schließlich erstellen wir eine Root-Komponente und fügen die TodoList zum Rendern in die Root-Komponente ein.

Durch die Demonstration dieses Falles können wir sehen, wie wir die Bereitstellungs- und Injektionsfunktionen verwenden, um eine effiziente Datenübertragung zwischen Komponenten zu erreichen. Unabhängig davon, ob wir einfache kleine Komponenten entwickeln oder komplexe und flexible Anwendungen erstellen, können wir mithilfe der Bereitstellungs- und Injektionsfunktionen Komponenten besser organisieren und die Entwicklungseffizienz verbessern.

Das obige ist der detaillierte Inhalt vonBereitstellung und Injektion von Funktionen in Vue3: effiziente Datenübertragung zwischen Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!