Home / Questions / 105712
Accepted
Juan Pablo B
Asked: 2020-09-29 05:44:39 +0800 CST 2020-09-29 05:44:39 +0800 CST

Communication between components in VueJs

  • 772

I have 2 components inside /resources/assets/js/components, the first one has:

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

The idea is that when you click on the button, call getDataCategory() and there set this.show_data as you see it, and so far it works, now I need to pass that this.show_data to another component that is the following. I want to use as seen in the form the if="show_data" has values ​​to show the form. (I understand that you can put this component inside the other, but due to the structure of the template I can't and I need this communication.

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

2 Answers

  1. Best Answer

    You can create a "Bus" to send communications between components that have no parent-child relationship between them, basically it's an empty Vue instance:

    var bus = new Vue()

    then you do the $emitfrom where you want to send the information:

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

    This is how you receive it in the component you want:

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

    This was all taken from the documentation , though I've already used it in practice too.

    • 2

  2. The two most common ways to communicate between components in Vue is through the event bus pattern and the state management pattern.

    • Event Bus Pattern : As Shaz mentions, it basically consists of creating an instance of Vue ( bus ) which allows unrelated components to communicate with each other. Communication occurs through publications and subscriptions to the bus by said components.
    • State Management Pattern : It consists of the creation of a centralized store for all the components of an application.

    Depending on the complexity of the application, you must choose what best suits your needs. Typically, the event bus is used more for communication between isolated components that don't necessarily alter the state of the application.

    As an application starts to grow, using a bus becomes increasingly difficult to maintain, and that's when a state management pattern becomes useful. The recommended one is vuex , which is maintained by Evan, the creator of Vue.

    • 1