Fonctions de méthode dans Vue3 : Maîtriser la méthode de communication entre les composants Vue3

Vue3 est actuellement l'un des frameworks front-end les plus populaires. Il est très apprécié pour ses fonctionnalités puissantes et son API simple et facile à utiliser. Vue3 offre de nombreuses façons d'organiser et d'interagir avec divers composants, notamment la communication inter-composants, la gestion des états, les composants dynamiques, etc. Dans Vue3, nous pouvons utiliser certaines fonctions de méthode pour implémenter la communication entre les composants.

1. props

props est une fonctionnalité importante de Vue3. C'est un moyen de définir les propriétés des composants et de transférer des données. Si vous devez transmettre des données d'un composant à ses composants enfants, vous pouvez utiliser des accessoires. Vous pouvez spécifier un tableau des propriétés que vous souhaitez accepter dans l'option props du composant enfant. Lorsque vous transmettez des propriétés à partir d'un composant parent, ces propriétés sont automatiquement transmises et disponibles dans le composant enfant. Voici un exemple simple :

<template>
  <div>
    <Child :message="message" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

Dans le composant Child, nous pouvons recevoir des données via des accessoires :

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

Notez que chaque attribut doit être spécifié dans le type d'option props afin que vous puissiez vous assurer que le type de données transmis au composant enfant est correct.

2. emit

emit est une autre méthode de communication inter-composants couramment utilisée dans Vue3. Lorsque vous devez déclencher un événement dans un composant enfant, vous pouvez utiliser la méthode submit. Dans le composant parent, vous pouvez écouter cet événement et effectuer certaines opérations. Voici un exemple simple :

<template>
  <div>
    <Child @alert="showAlert" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  methods: {
    showAlert(msg) {
      alert(msg)
    }
  }
}
</script>

Dans le composant Enfant, nous pouvons utiliser $emit pour déclencher un événement :

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick() {
      this.$emit('alert', 'Hello World!')
    }
  }
}
</script>

Lorsque l'utilisateur clique sur le bouton, le composant enfant déclenchera un événement d'alerte et délivrera un message au composant parent.

3. provide/inject

provide/inject est une autre méthode de communication inter-composants fournie par Vue3. Il est légèrement différent des accessoires et des émissions dans la mesure où il vous permet de fournir certaines données au composant enfant. Les composants enfants peuvent recevoir ces données via l'option d'injection. Voici un exemple simple :

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  provide: {
    message: 'Hello World!'
  },
  components: { Child }
}
</script>

Dans le composant Child, nous pouvons utiliser l'option inject pour recevoir ces données :

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

Notez que vous spécifiez ce qui doit être reçu dans l'option inject Le nom des données afin qu'elles puissent être utilisées directement dans les composants enfants.

4. $parent / $children

$parent et $children sont deux autres outils de communication entre les composants fournis par Vue3. $parent est utilisé à partir d'un composant enfant pour accéder aux propriétés ou aux méthodes de son composant parent, tandis que $children est utilisé à partir d'un composant parent pour accéder aux propriétés ou aux méthodes de ses composants enfants. Puisque ces deux options sont fournies dans Vue3, elles pourraient être abandonnées dans les futures versions de Vue3. $attrs et $listeners sont deux options étonnantes fournies par Vue3. L'option $attrs fournit au composant tous les attributs qui lui sont transmis, et ils peuvent être utilisés avec l'option props du composant enfant, comme ceci :

<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$attrs) // { message: "Hello World!" }
  }
}
</script>

Dans le composant Enfant :

5. <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   <script>
   export default {
     props: {
       message: {
         type: String,
         required: true
       }
     }
   }
   </script>

   # 🎜🎜#Dans l'exemple ci-dessus, le sous-composant peut utiliser l'option $attrs pour recevoir et définir les options d'accessoires correspondantes.

L'option $listeners fournit au composant tous les écouteurs d'événements dans le composant parent. Cela vous permettra d'utiliser ces écouteurs d'événements dans les composants enfants. Comme indiqué ci-dessous :

<template>
  <div>
    <button v-on="$listeners">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$listeners) // { 'click': [f1] }
  }
}
</script>

Lorsque l'utilisateur clique sur le bouton, l'écouteur d'événement dans le composant parent sera déclenché.

Résumé

Cet article répertorie les méthodes de communication inter-composants couramment utilisées dans Vue3. Ces méthodes incluent : accessoires, émettre, fournir/injecter, $parent/$enfants et $attrs/$listeners. Ces méthodes peuvent vous aider à mieux organiser et interagir avec divers composants, à améliorer l'efficacité de votre développement et à améliorer l'expérience utilisateur. En pratique, vous devrez peut-être utiliser plusieurs méthodes simultanément pour atteindre vos objectifs commerciaux. Assurez-vous donc de connaître les options et de savoir quand et où elles s'appliquent.

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!