Comment transmettre des données du composant parent au composant enfant dans vue

Cet article présente principalement la méthode de transmission des données des composants parents de Vue aux composants enfants (accessoires). L'article présente également le code d'implémentation du transfert de valeur (accessoires) entre les composants parents et enfants de Vue. Les amis qui en ont besoin peuvent s'y référer. it

vue structure de la page

Lorsque vous travaillez sur un projet, il arrive souvent que les données de cette page (par exemple : ID numéro) doit être amené sur une autre page pour interroger les détails de certaines données, etc. La méthode traditionnelle consiste à ne pas ajouter de paramètres à l'URL, au cookie ou à attribuer des valeurs au "sessionStorage" et au "localStorage" de H5. C'est la méthode de passage entre les pages.

Avec les méthodes populaires de développement basées sur des composants d'Angularjs, React et Vue, c'est devenu une autre bonne solution.

Récemment, des amis m'ont demandé comment transmettre des paramètres entre les composants Vue ? En fait, Vue dispose de trois façons de transférer des données entre les composants (accessoires, communication des composants, slot. Cette fois, la première méthode est la suivante :

un contenu du composant parent :

Introduire l'importation du sous-composant b sous le formulaire 'b.vue'

components: {'b-p': b} // 注册，只能在当前a组件里使用
<b-p :propsname=&#39;datas(向子组件传递的参数)&#39;></b-p>

Contenu du sous-composant B :

<template> <p>{{propsname}}</p> </template>
export default{
props: [&#39;propsname&#39;],
data(){}
}

Tant que la valeur des données dans un Le composant est toujours là Change, les accessoires du sous-composant b surveilleront les changements dans propsname en temps réel et s'afficheront en conséquence sur la page. La méthode d'utilisation est également {{propsname}}.

PS : laissez-moi vous présenter comment transmettre des valeurs (props) entre les composants vue parent et enfant

Définir d'abord un enfant composant et enregistrez-le dans les accessoires du composant

<template>
  <p>
    <p>{{message}}(子组件)</p>
  </p>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

Dans le composant parent, introduisez le composant enfant et transmettez la valeur requise dans le composant enfant

<template>
  <p>
    <p>父组件</p>
    <child :message="parentMsg"></child> 
  </p>
</template>
<script>
import child from &#39;./child&#39; //引入child组件
export default {
  data() {
      return {
        parentMsg: &#39;a message from parent&#39; //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

Cette méthode ne peut être transmis du parent à l'enfant, et le composant enfant Les données du composant parent ne peuvent pas être mises à jour

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Problèmes liés à la transmission de valeurs dans layui

Comment implémenter un système de loterie à l'aide de JavaScript

Réponse détaillée : Quel impact les changements de vue ont-ils sur les composants ?

Comment emballer avec Parcel

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!