Communication entre les composants enfants de Vue et les composants parents (avec code)

1. Configuration de l'environnement

• Télécharger vue-cli : npm install -g vue-cli

• Initialiser le projet : vue init webpack vue-demo

• Entrez dans le dossier vue-demo : cd vue-demo

• Téléchargez et installez les dépendances : npm install

• Exécuter ce projet : npm run dev

2. Le composant parent transmet la valeur au composant enfant

• Créez un composant sous le dossier src/components/, Accueil .vue

• Créez un composant enfant, créez un nouveau dossier sous le dossier src/components/ et créez un nouveau composant Child.vue

Créez des accessoires dans Child.vue pour recevoir la valeur transmise par le composant parent

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array
    }
}
</script>

<style  scoped>
    
</style>

Enregistrez le composant Child dans Home.vue et ajoutez la balise home-child à la balise p du modèle, utilisez l'instruction v-bind dans la balise pour lier c. Le composant enfant peut recevoir la valeur transmise par le composant parent via des accessoires.

<template>
  <p class="hello">
    <home-child v-bind:c="c"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

<style scoped>

</style>

Résultat

3. Le composant enfant transmet la valeur au composant parent

Lier l'événement de clic ChildClick au bouton
Dans l'événement Utilisez $emit dans la fonction pour déclencher un événement personnalisé et passer un paramètre. Ce paramètre est la valeur à transmettre du composant enfant au composant parent.

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array,
        data: String
    },
    methods: {
        ChildClick: function () {
            this.$emit("ListenChild","I am child.vue")
        }
    }
}
</script>

<style  scoped>

</style>

Écoutez l'événement personnalisé dans la balise home-child du composant parent et ajoutez une méthode ShowChild qui répond à l'événement.

<template>
  <p class="hello">
    <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;Home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3],
      data: " "
    }
  },
  methods: {
    ShowChild: function (data) {
      this.data = data
      console.log("data:" + data)
    }
  }
}
</script>

<style scoped>

</style>

Résultat :

Après avoir cliqué sur le bouton :

Articles associés :
Exemple détails Explication détaillée de la communication entre les composants vue et les composants parents (2)

Explication détaillée de la communication entre les sous-composants vue et les composants parents

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!