Communication entre les composants enfants de Vue et les composants parents (avec code)-js tutoriel-php.cn

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

php是最好的语言

Libérer： 2018-08-06 15:54:26

original

1926 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

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>

Copier après la connexion

É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>

Copier après la connexion

Résultat :
Communication entre les composants enfants de Vue et les composants parents (avec code)