1

Eu possuo dois componentes separados e preciso que ao clicar em um botão, ele modifique a variavel de outro componente.

Por exemplo eu tenho o seguinte componente:

var componenteFiltroBusca = new Vue({
     el: '#componenteFiltroBusca',
     data: {
        buscadorText: '(por n° de cupón, importe)',
     }
});

E quando eu clicar em um botão que está dentro do:

var tabMovimientos = new Vue({
    el: '#tabMovimientos',
})

Eu preciso que ele altere o texto dentro do buscadorText, como fazer isso?

2
  • Qual é a relação entre eles? Têm algum componente em comum? são descendentes?
    – Sergio
    Commented 17/08/2017 às 13:42
  • eles não possuem nenhuma relação
    – haykou
    Commented 17/08/2017 às 13:42

2 Respostas 2

3

Se os componentes não têm nenhuma relação podes criar um $bus, ou seja um canal via Vue.prototype e que todos os componentes podem usar para enviar e escutar eventos.

Vue.prototype.$bus = new Vue({});

e depois nos componentes podes fazer assim:

// para avisar o canal de eventos
this.$bus.$emit('increment', a, b, c);

// para receber eventos
this.$bus.$on('increment', function(a, b, c){
  // etc...
});

Implementado:

Vue.prototype.$bus = new Vue({});
new Vue({
    el: '#botao',
    data: {
        count: 0
    },
    methods: {
        updateCount() {
            this.count++;
            this.$bus.$emit('increment', this.count);
        }
    }
});

new Vue({
    el: '#mostrador',
    data: {
        contador: 0,
    },
    created() {
        this.$bus.$on('increment', val => this.contador = val);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="botao">
    <button type="submit" @click="updateCount">
        Incrementar
    </button>
</div>
<div id="mostrador">
    {{contador}}
</div>

0

Tem duas formas elegantes para fazer isso, ou você instancia o outro componente dentro do seu e passa os novos valores via props

Ou você usa Vuex para construir uma arquitetura direcional. Espero ter ajudado!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .