Estoy segura de que hay una manera simple de hacer esto, pero no puedo entenderlo.

En mi archivo html tengo el siguiente botón:

<button @click="showModal">Show Modal</button>

Al hacer clic en ese botón se ejecuta el siguiente método:

new Vue({
    el: '#root',
    methods: {
        showModal() { Event.$emit('showModal'); },
    }
});

Lo que quiero que suceda cuando hago clic en ese botón es alternar una clase en un componente modal. Aquí está el código relevante para el componente:

Vue.component('modal', {

    template: `
        <div :class="[ modalClass, {'is-active' : isActive }]">
            ETC...
        </div>
        `

    data() {
        return {
            isActive: false,
            modalClass: 'modal'
        }
    }

Soy nuevo en VueJS y estoy tratando de descubrir cómo comunicarme en Vue. Parece que no puedo entender el siguiente paso. ¿Qué debo hacer para que isActive se establezca en verdadero cuando se hace clic en el botón?

Gracias por cualquier ayuda que pueda ofrecer.

Todo lo mejor,

Moshe

2
Moshe 23 mar. 2017 a las 20:47

2 respuestas

La mejor respuesta

En su main.js (o donde quiera que instale su aplicación Vue)

Puede usar una instancia de vue simple como bus de eventos

Vue.prototype.bus = new Vue();

De esta manera puedes usarlo así:

this.bus.$on('event', (params) => {})

this.bus.$emit('event', params)

Echa un vistazo a uno de mis proyectos vue en github como ejemplo, en el bus de eventos mucho. https://github.com/wilomgfx/vue-weather

También echa un vistazo a esta increíble serie gratuita en VueJS 2, es realmente genial: https://laracasts.com/series/learn-vue-2- paso a paso

Ejemplo completo usando la pregunta del operador:

https://codepen.io/wilomgfx/pen/OpEVpz?editors=1010

3
WilomGfx 23 mar. 2017 a las 21:07

Para comunicarse de padre a hijo, puede usar accesorios de componentes.

Si tiene una comunicación más profunda (los padres se comunican con little-little ...- child) puede usar la mención busEvent de @WilomGfx.

Código para la comunicación de padres a hijos:

Vue.component('modal', {
    template: '<div :class="[ modalClass, {\'is-active\' : isActive }]">' +
            'Hello Word !' +
        '</div>',
    data() {
        return {
            modalClass: 'modal'
        }
    },
    props: {
    	isActive: { type: Boolean, default: false }
    }
});

new Vue({
    el: '#root',
    data() {
      return {
        isActive: false,
      }
  },
  methods: {
    showModal() {this.isActive = true },
  }
});
.is-active {
  color: red;
}
<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="root">
  <modal :is-active="isActive"></modal>
  <button @click="showModal">Show Modal (going red when prop isActive is true)</button>
</div>
1
Happyriwan 23 mar. 2017 a las 18:09