Utilisation de provide et inject dans vue

provide et inject sont des méthodes de partage de données dans Vue.js : provide() fournit des données dans le composant parent. inject() récupère les données fournies par le composant parent dans le composant enfant. Caractéristiques : les données sont réactives et circulent vers l'emplacement requis à la demande sans passer explicitement d'accessoires.

provide et inject dans Vue.js

Question : Que sont provide et inject dans Vue.js ?

Réponse : provide et inject sont deux méthodes globales dans Vue.js, utilisées pour partager des données entre différents composants.

Détails :

provide

• est utilisé dans un composant parent pour fournir des données à ses composants enfants.
• Utilisez la méthode provide() dans la méthode setup() ou create() du composant parent pour fournir des données.
• La syntaxe utilisée : provide('propertyName', value)provide('propertyName', value)

inject

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

inject

est utilisée pour récupérer les données du composant parent dans le composant enfant.
1. Utilisez la méthode inject() dans la méthode setup() du sous-composant pour obtenir les données.

Syntaxe utilisée : const propertyName = inject('propertyName')

Utilisation :

Dans le composant parent, utilisez la méthode provide() pour fournir des données :

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

Dans un composant enfant, utilisez la méthode inject() pour obtenir des données :

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

🎜Caractéristiques : 🎜🎜🎜🎜provide et inject permettent aux données de circuler à la demande vers l'emplacement souhaité dans l'arborescence des composants. 🎜🎜Ils peuvent être utilisés pour partager un état, des éléments de configuration ou d'autres données sans transmettre explicitement des accessoires d'un composant à l'autre. 🎜🎜Les données partagées sont réactives, lorsqu'elles changent dans le composant parent, le composant enfant sera automatiquement mis à jour. 🎜🎜

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!