Maison > Article > interface Web > Comment utiliser provide/inject dans Vue pour implémenter le transfert de méthode entre les composants ancêtres et les composants descendants
Vue, en tant que framework front-end populaire, fournit une variété de méthodes pour organiser et gérer les interactions entre les composants. Dans Vue, provide et inject sont deux méthodes qui peuvent être utilisées pour implémenter le transfert de méthodes entre les composants ancêtres et les composants descendants.
provide et inject sont des méthodes de communication entre les composants avancés fournies par Vue. Leur fonction est de fournir des données aux composants ancêtres, puis d'utiliser la méthode inject pour recevoir des données dans les composants descendants.
provide et inject sont de nouvelles fonctionnalités de Vue.js 2.2.0+. Ce sont des alternatives pour la communication entre les composants parents et enfants.
L'option provide peut être un objet ou une fonction qui renvoie un objet, et son rôle est de définir les données que vous fournissez. L'option inject peut être un tableau ou un objet, où le membre du tableau est une chaîne, représentant la propriété que vous devez injecter. La clé du membre objet représente le nom de la liaison locale et la valeur de la clé est la clé fournie par. son composant parent.
L'utilisation de provide et inject peut être utilisée dans les scénarios suivants :
3. Implémentation de provide et inject
<template> <div> <child-comp :setData="setData"></child-comp> </div> </template> <script> import ChildComp from './ChildComp.vue'; export default { components: { ChildComp }, provide() { return { setData: this.setData } }, data() { return { text: 'Hello World' } }, methods: { setData() { this.text = 'Vue.js is awesome'; } } } </script>
<template> <div> <button @click="setData()">修改文本</button> </div> </template> <script> export default { inject: ['setData'] } </script>
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!