web-dev-qa-db-fra.com

Passer des données d'un enfant à un parent dans Vuejs (est-ce si compliqué?)

merci d'avoir lu ma question.

J'ai lu à ce sujet

vuejs met à jour les données parent du composant enfant

https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2

Le concept est le même, je dois passer un objet de données d'enfant à parent, j'ai utilisé $ emit pour transmettre des données au composant parent mais ne fonctionne pas. Savez-vous ce qui ne va pas? Vérifiez mon code ici:

Vue.component('list-products', {
  delimiters: ['[[', ']]'],
  template: '#list-products-template',
  props: ['products'],
  data: function () {
    return {
      productSelected: {}
    }
  },
  methods: {
    showDetailModal: function (product) {
        console.log('click product in child, how can i pass this product to productSelected data in parent?');
      console.log(product);
      this.productSelected = product;
      this.$emit('clickedShowDetailModal', product);
    }
  }
});


var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#resultComponent',
  data: {
    listProducts: [
        {'name':'test1',id:1},
        {'name':'test2',id:2},
        {'name':'test3',id:3}
    ],
    productSelected: {}
  },
  methods: {
    clickedShowDetailModal: function (value) {
      console.log('value');
      console.log(value);
      this.productSelected = value;
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="resultComponent" data-toggler=".small-up-2" class="row small-up-1">
  <list-products :products="listProducts"></list-products>
</div>

<script type="text/x-template" id="list-products-template">
  <div>
    <div class="column column-block" v-for="(product, index) in products" :product="product" :index="index" :key="product.id">
    <li class="more-benefits">
        <a @click="showDetailModal(product)">Click me [[ product.name ]] and check console.log »</a>
    </li>
    </div>
  </div>
</script>

Merci d'avance.

vue.jsemit
26
Sommer

Vous n'écoutez pas l'événement. J'ai changé le nom de l'événement en clicked-show-detail. Essaye ça.

Dans la méthode showDetailModal de votre composant.

this.$emit('clicked-show-detail', product);

Dans ta vue.

<list-products :products="listProducts" @clicked-show-detail="clickedShowDetailModal"></list-products>

Exemple .

29
Bert

Les accessoires sont pour parent -> child

Vous pouvez utiliser $emit pour child -> parent

la directive v-on capture les événements de composants enfants émis par $ emit

Le composant enfant déclenche l'événement cliqué:

export default {
   methods: {
     onClickButton (event) {
         this.$emit('clicked', 'someValue')
     }
   }
}

Le composant parent reçoit l'événement cliqué:

<div>
    <child @clicked="onClickChild"></child>
</div>

...

export default {
  methods: {
      onClickChild (value) {
          console.log(value) // someValue
      }
  }
}
18
bereket gebredingle