Fournir et injecter des fonctions dans Vue3 : transfert de données efficace entre les composants

Les fonctions provide et inject de Vue3 sont devenues la solution privilégiée pour un transfert de données efficace entre les composants. Ils utilisent un nouveau mécanisme pour permettre aux composants enfants d'obtenir des données dans les composants ancêtres et de mettre à jour les données des composants ancêtres dans les composants parents. Cela offre des possibilités illimitées pour créer des applications complexes et flexibles. Cet article abordera en profondeur les fonctions provide et inject dans Vue3 pour aider les lecteurs à mieux comprendre leurs principes de fonctionnement et leur utilisation.

1. Que sont les fonctions provide et inject ?

Les fonctions provide et inject sont de nouvelles fonctionnalités de Vue3. Elles fournissent une méthode de transfert de données différente de props et $emit. La fonction provide est utilisée pour fournir des données et la fonction inject est utilisée pour injecter des données. La fonction provide reçoit un objet en tant que paramètre, qui contient les données qui doivent être fournies au composant enfant. La fonction inject reçoit un tableau ou un objet en paramètre. Ce tableau ou cet objet contient les données qui doivent être injectées à partir du composant ancêtre. Il convient de noter que les fonctions provide et inject ne peuvent transmettre des données qu'entre le même composant ancêtre et les mêmes composants descendants, et ne peuvent pas transmettre de données entre les composants.

2. Comment fonctionnent les fonctions provide et inject

Dans Vue3, les fonctions provide et inject utilisent un nouveau mécanisme pour réaliser le transfert de données. Ce mécanisme est basé sur la fonction de rendu personnalisée de Vue, qui permet d'utiliser la nouvelle API contextuelle pour fournir et injecter des données.

Dans la fonction provide, nous pouvons fournir des données en définissant l'attribut provide, par exemple :

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

Dans cet exemple, nous fournissons une donnée dans le composant racine avec le nom data et sa valeur est 'this is data' . Ensuite, nous pouvons utiliser la fonction inject dans le sous-composant pour injecter ces données :

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

Dans le sous-composant, nous injectons des données via l'attribut inject. Cet attribut doit contenir le nom des données qui doivent être injectées. ici, nous injectons le nom, ce sont les données des données. Dans le composant enfant, nous pouvons accéder aux données injectées tout comme les accessoires.

Il convient de noter que si la fonction inject est utilisée dans un composant enfant, mais que la fonction provide ne fournit pas les données qui doivent être injectées, alors les données injectées ne seront pas définies.

3. Comment utiliser les fonctions provide et inject

Lors de l'utilisation des fonctions provide et inject, nous devons faire attention aux points suivants :

(1) Les fonctions provide et inject ne peuvent être transmises qu'entre le même ancêtre composant et composants descendants Les données ne peuvent pas être transmises entre les composants.

(2) Les données fournies dans la fonction provide peuvent être de tout type, y compris des fonctions, des objets, etc.

(3) Les données injectées à l'aide de la fonction inject sont en lecture seule par défaut, c'est-à-dire que les données du composant ancêtre ne peuvent pas être modifiées dans le composant enfant. Si vous souhaitez modifier les données du composant ancêtre, vous devez fournir une méthode dans le composant ancêtre et appeler la méthode dans le composant enfant pour mettre à jour les données.

(4) Lors de l'implémentation des fonctions provide et inject, nous pouvons utiliser le type Symbol pour fournir ou injecter des données, ce qui peut empêcher les données d'être accidentellement modifiées.

(5) Lorsque nous utilisons provide pour fournir des données, nous pouvons utiliser la fonction ref ou reactive dans la fonction de configuration pour créer des données réactives, afin que les données puissent être utilisées directement dans le sous-composant et puissent répondre automatiquement aux modifications des données.

Ce qui suit est un cas d'utilisation complet, qui implémente une simple TodoList et utilise les fonctions provide et inject pour transférer des données :

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')

Dans ce cas, nous définissons un composant TodoList et l'utilisons dans ce composant. La fonction provide fournit deux données pour les méthodes todos et addTodo. Parmi eux, todos est un tableau réactif utilisé pour stocker toutes les informations de tâche, et la méthode addTodo est utilisée pour ajouter une nouvelle tâche. Dans le sous-composant TodoItem, nous utilisons la fonction inject pour injecter des données de tâches et utilisons l'attribut props pour recevoir les données de tâches transmises. Dans ce composant, nous définissons la méthode toggleTodo pour mettre à jour l'état terminé dans todo, puis utilisons le texte de todo, les attributs done et la méthode toggleTodo dans le modèle. Enfin, nous créons un composant racine et insérons la TodoList dans le composant racine pour le rendu.

Grâce à la démonstration de ce cas, nous pouvons voir comment utiliser les fonctions provide et inject pour obtenir un transfert de données efficace entre les composants. Que nous développions de petits composants simples ou que nous construisions des applications complexes et flexibles, l'utilisation des fonctions provide et inject nous permet de mieux organiser les composants et d'améliorer l'efficacité du développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!