3

No puedo lograr que los componentes se comuniquen los componentes:

componente treeview:

<template name="v-treeview">
    <div class="container" id="treeviewplan">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Plan de cuenta - Reportes</div>

                    <div class="card-body">
                    <div>
                    <ul>
                      <li  v-for="(itemsID, index) in dataTreeview" :key="itemsID.id">{{itemsID.name}}</li>  
                    </ul>
                    <dialogpcuenta :idEmit="dataEmit" v-if="activeIdCplan==true"></dialogpcuenta>  
                    </div>  
                     <h2>Example 2: one item can be selected</h2>
      <v-treeview
        :items="items"
        caption-field="name"
        children-field="children"
        v-model="treeview"
       selectable
       selected-color
       value
      keyField="id"
      v-on:click.native="jsonDataPCuenta(treeview[0])"
      >
       <template slot="prepend" slot-scope="{ item, open, leaf }">
      <v-icon v-if="!item.file">
        {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
      </v-icon>
      <v-icon v-else>
        {{ files[item.file] }}
      </v-icon>
    </template>
      </v-treeview>
      <div>
        Selected item ID: {{ treeview }}
      </div>
      <div>
        Selected array ID: {{ treeview[0] }}
      </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

window.Vue = require('vue')


    export default {
      props:
        {'treePcuenta':false}
      ,
    data: () => ({
      items: [],
      treeview:[],
      dataTreeview:[],
      activeIdCplan:false,
      dataEmit:[],

    }),
     created: function() {
    // get todo items and start listening to events once component is created
    this.getPlan(); 

  },
    methods:{
      getPlan(){
        const dev = this
        let uri = "http://localhost/software/program/public/datajson";
      axios
        .get(uri, {
          method: "GET",
          mode: "no-cors",
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "application/json"
          },
          withCredentials: true,
          credentials: "same-origin"
        })
        .then(response => {
          this.items = response.data;

        });
      },
      jsonDataPCuenta(id) {
      let uri = "http://localhost/software/program/public/icplan/" + id
      let thix = this
      this.dataEmit=id
      axios
        .get(uri)
        .then(response => {
          thix.dataTreeview = response.data;
          console.log('Emito')
          this.$emit('jsonDataPCuenta', 'hola como estas')
          this.activeIdCplan = true;

        });
    },
      addpcuenta(id){
        this.activeIdCplan=true 
      }
    }
  }
</script>
<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color #2c3e50
</style>

componente dialogo:

<template>
  <v-layout row justify-center  @jsonDataPCuenta="onPcuenta">
    <v-dialog v-model="dialog" persistent max-width="600px">
      <v-btn slot="activator" color="primary" dark>Open Dialogs</v-btn>
      <v-card>
        <v-card-title>
          <span class="headline">User Profile</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal first name*" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="Legal last name*"
                  hint="example of persistent helper text"
                  persistent-hint
                  required
                ></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Email*" required></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Password*" type="password" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6>
                <v-select
                  :items="['0-17', '18-29', '30-54', '54+']"
                  label="Age*"
                  required
                ></v-select>
              </v-flex>
              <v-flex xs12 sm6>
                <v-autocomplete
                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                  label="Interests"
                  multiple
                ></v-autocomplete>
              </v-flex>
            </v-layout>
          </v-container>
          <small>*indicates required field</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
window.Vue = require('vue')
window.treeview= require('../TreeViewPlan.vue')



  export default {
     props: ['idEmit'],
    data: () => ({
      dialog: false
    }),
    created: function() {
        this.onPcuenta()
        this.$on('jsonDataPCuenta', function (id) {
            console.log('escuchando emit')
  }.bind(this))

    },
    components:{
        treeview,
    },
    methods:{
      onPcuenta(){

        console.log('Escucho')
        this.$on('jsonDataPCuenta',(id)=>{
            console.log(id)
                  })

      }
    }
  }
</script>
6
  • En la consola no muestra nada, lo unico que probe es colocar $on en create() dentro del mismo componente y ahi si lo escucha, muestra el mensaje. Pero no puedo lograr la comunicacion en los dos componentes... el 30 ene. 2019 a las 14:05
  • Lo que yo quiero es pasar el ID de un componente a otro... el 30 ene. 2019 a las 14:09
  • Esta bien, acabo de eliminar el bus y sigo sin poder comunicarlo. Cuando a estas instancias por que ya se me acabaron las ideas. Utilizo a this.$emit y a this.$on el 30 ene. 2019 a las 14:24
  • Haces click en un items del treeview y dispara el metodo jsonDataPCuenta(id). Este metodo, a demas de buscar el dato en la base de datos, emite un tigger this.$emit donde llevaria el "id" del metodo jsonDataPCuenta(id) al componente <dialogpcuenta/>. Dentro del componente <dialogpcuenta/> esta el metodo onPcuenta() que escucha this.$on a el componente <treeview/>. No estoy logrando que el componente <dialogpcuenta/> escuche. el 30 ene. 2019 a las 14:37
  • Saque el bus, estoy usando unicamente this.$emit y this.$on. Ahora acutalizo el script detallado. Logre pasar el dato con props, pero quiero poder resolver el problema de $emi y $on el 30 ene. 2019 a las 14:51

1 respuesta 1

4

Un bus no es mas que simplemente otra instancia de VUE, en la cual solo se la usa para comunicar distintos componentes dentro de una misma aplicación.

Para ello, primero tenemos que crear el bus, esto simplemente lo hacemos creando otra instancia de una app VUE de la siguiente forma.

//Archivo EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

De esa forma, ya creamos un bus.

Ahora, para usarlo, tenemos que importar dicho archivo en cada componente, y usar esa instancia para hacer los $emit y los $on.

Veamos todo esto en un ejemplo

Vamos a crear una app simple con 3 componentes.

//App.vue
<template>
  <div id="app">
    <BaseVacia/>
  </div>
</template>

<script>
import BaseVacia from './components/BaseVacia.vue'

export default {
  name: 'app',
  components: {
    BaseVacia
  }
}
</script>

Y vamos a hacer un componente vacio, que sirva de padre de los dos que van a hablar entre si:

<template>
    <div>
        Aca hay 2 componentes que se conectan mediante un bus
        <componente1/>
        <componente2/>
    </div>

</template>
<script>

import Componente1 from './Componente1.vue';
import Componente2 from './Componente2.vue';

export default {
    name:"BaseVacia",
    components: {
    Componente1,
    Componente2
  }
}
</script>

Y 2 componentes, uno que emita:

<template>
    <div>
        <h1>
            Componente 1 (emite)
        </h1>
        <button @click="Emitir()">
            Apretame!
        </button>
        En este componente, la Cantidad es {{this.Cantidad}}
    </div>
</template>

<<script>

import { EventBus } from '../EventBus.js';

export default {
    name: 'Componente1',
    data() {
        return {
            Cantidad: 0
        }
    },
    methods: {
        Emitir() {
            this.Cantidad++;
            console.log(this.Cantidad)
            EventBus.$emit('Apreto', this.Cantidad)
        }
    },
}
</script>

Y otro que escucha:

<template>
    <div>
        <h1>
            Componente 2 (recibe)
        </h1>
        En este componente, la Cantidad es {{this.Cantidad}}
    </div>
</template>

<script>

import { EventBus } from '../EventBus.js';

export default {
    name: 'Componente2',
    data() {
        return {
            Cantidad: 0
        }
    },
    mounted() {
        var actual = this;
            EventBus.$on('Apreto',function Escucha(value) {
                actual.Cantidad = value;                
            });        
    },
}
</script>

En los dos componentes, el que escucha y el que emite, importan este archivo:

import { EventBus } from '../EventBus.js'; 

Que es el que definimos al principio, y no es mas que nuestro bus.

Entonces, cada vez que apretamos el boton en Componente1, se ejecuta el evento (se puede ver en la consola de depuracion de VUE del navegador) y el Componente2, que es quien creo una función para escuchar el evento, ejecuta justamente esa función.

Fijate que en el mounted del componente, cuando creamos al receptor del evento, hacemos var actual = this, esto es porque como la funcion se ejecuta fuera del contexto this, necesitamos que sepa cual es el this que tiene que tocar.

Otras referencias al respecto (y de donde salio la idea de este post):
referencia 1
referencia 2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.