Comunicación entre componentes en VueJs

publicado por: Anonymous

Tengo 2 componentes dentro de /resources/assets/js/components, el primero tiene:

 <template>
    <div class="inline">
              <button @click="getDataCategory(category)" :class="is_active == category.id ? 'btn-primary' : 'btn-default' " v-for='category in categories' class='btn btn-space'>{{category.name}}</button>     
    </div>
</template>

<script>
    import BaseUrlMixin from '../mixins/baseUrl.js'; 

    export default { 
        mixins: [BaseUrlMixin],           
        data(){
            return{
               id_tournament:null,
               categories:[],
               data_category: false, 
               is_active: false, 
               show_data: "",
            }
        },
        methods: {             
          getDataCategory: function(category){
              this.is_active = category.id;
              this.show_data = {
                  'category':category.name
              };
              this.data_category = true;
          }
        }, 
    }
</script> 

La idea es que al hacer click en el boton, llame a getDataCategory() y ahi setear this.show_data como se ve, y hasta aca funciona, ahora necesito pasar ese this.show_data a otro componente que es el siguiente. Quiero usar como se ve en el form el if=”show_data” tiene valores mostrar el formulario. (Entiendo que se puede poner este componente dentro del otro, pero por cuestion de estructura del template no puedo y necesito esta comunicación.

<template>
    <div>
        <form @submit.prevent="store()" :if="show_data">
          <label for="">Cantidad de fechas</label>  
          <input type="text" v-model="date" onkeypress='return event.charCode >= 48 && event.charCode <= 57' min="1" max="50" required="">
          <button class='btn btn-primary btn-sm' >
              <i class="fa fa-floppy-o" aria-hidden="true"></i>
              Guardar
          </button>
        </form>
    </div>
</template>

<script>

    export default {
       data(){
            return{
               id_tournament:null,
               date:'',
            }
        },
        methods: {
        },
        mounted() {     

            this.getIdTournament();
        } 
    }
</script> 

solución

Puedes crear un “Bus” para enviar las comunicaciones entre componentes que no tengan relación padre-hijo entre ellos, básicamente es una instancia de Vue vacía:

var bus = new Vue()

a continuación haces el $emit desde donde quieres enviar la información:

// in component A's method
bus.$emit('id-selected', 1)

así lo recibes en el componente que desees:

// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

Todo esto fue tomado de la documentación, aunque ya lo he usado en la práctica también.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *