Chame um método de componente Vue.js de fora do componente

Digamos que eu tenho uma instância principal do Vue que possui componentes filhos. Existe uma maneira de chamar um método pertencente a um desses componentes completamente fora da instância do Vue?

Aqui está um exemplo:

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

$('#external-button').click(function()
{
  vm['my-component'].increaseCount(); // This doesn't work
});

<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  
  <my-component></my-component>
  <br>
  <button id="external-button">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 5px;">
  <p>A counter: {{ count }}</p>
  <button @click="increaseCount">Internal Button</button>
    </div>
</template>

Então, quando clico no botão interno, o increaseCount()método é vinculado ao seu evento de clique e é chamado. Não há como vincular o evento ao botão externo, cujo evento de clique eu estou ouvindo com o jQuery, portanto, precisarei de outra maneira de chamar increaseCount.

EDITAR

Parece que isso funciona:

vm.$children[0].increaseCount();

No entanto, essa não é uma boa solução, pois estou referenciando o componente por seu índice na matriz filho e, com muitos componentes, é improvável que ele permaneça constante e o código seja menos legível.

No final, optei por usar a refdiretiva de Vue . Isso permite que um componente seja referenciado pelo pai para acesso direto.

Por exemplo

Tenha um componente registrado na minha instância pai:

var vm = new Vue({
    el: '#app',
    components: { 'my-component': myComponent }
});

Renderize o componente no template / html com uma referência:

<my-component ref="foo"></my-component>

Agora, em outro lugar, posso acessar o componente externamente

<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>

Veja este violino para um exemplo: https://jsfiddle.net/xmqgnbu3/1/

(exemplo antigo usando o Vue 1: https://jsfiddle.net/6v7y6msr/ )

Desde o Vue2, isso se aplica:

var bus = new Vue()

// no método do componente A

bus.$emit('id-selected', 1)

// no gancho criado do componente B

bus.$on('id-selected', function (id) {

  // ...
})

Veja aqui os documentos do Vue. E aqui estão mais detalhes sobre como configurar exatamente esse barramento de eventos.

Se você quiser obter mais informações sobre quando usar propriedades, eventos e / ou gerenciamento centralizado de estados, consulte este artigo .

Você pode usar o sistema de eventos Vue

vm.$broadcast('event-name', args)

e

 vm.$on('event-name', function())

Aqui está o violino: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

Uma versão ligeiramente mais simples (mais simples) da resposta aceita:

Tenha um componente registrado na instância pai:

export default {
    components: { 'my-component': myComponent }
}

Renderize o componente no template / html com uma referência:

<my-component ref="foo"></my-component>

Acesse o método do componente:

<script>
    this.$refs.foo.doSomething();
</script>

Você pode definir ref para componentes filho e, em pai, pode chamar via $ refs:

Adicione ref ao componente filho:

<my-component ref="childref"></my-component>

Adicione evento de clique ao pai:

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <my-component ref="childref"></my-component>
  <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 2px;" ref="childref">
    <p>A counter: {{ count }}</p>
    <button @click="increaseCount">Internal Button</button>
  </div>
</template>

Digamos que você tenha um child_method()componente filho:

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

Agora você deseja executar o child_methodcomponente pai from:

<template>
    <div>
        <button @click="exec">Execute child component</button>
        <child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
    </div>
</template>

export default {
    methods: {
        exec () { //accessing the child component instance through $refs
            this.$refs.child.child_method() //execute the method belongs to the child component
        }
    }
}

Se você deseja executar um método do componente pai a partir do componente filho:

this.$parent.name_of_method()

NOTA: Não é recomendável acessar o componente filho e pai como este.

Em vez disso, como prática recomendada, use Adereços e Eventos para a comunicação entre pais e filhos.

Se você deseja comunicação entre componentes, use vuex ou barramento de eventos

Por favor, leia este artigo muito útil

Esta é uma maneira simples de acessar os métodos de um componente de outro componente

// This is external shared (reusable) component, so you can call its methods from other components

export default {
   name: 'SharedBase',
   methods: {
      fetchLocalData: function(module, page){
          // .....fetches some data
          return { jsonData }
      }
   }
}

// This is your component where you can call SharedBased component's method(s)
import SharedBase from '[your path to component]';
var sections = [];

export default {
   name: 'History',
   created: function(){
       this.sections = SharedBase.methods['fetchLocalData']('intro', 'history');
   }
}

Aqui está um simples

this.$children[indexOfComponent].childsMethodName();

Não tenho certeza se é o caminho certo, mas este funciona para mim.
Primeiro importe o componente que contém o método que você deseja chamar no seu componente

import myComponent from './MyComponent'

e chame qualquer método de MyCompenent

myComponent.methods.doSomething()

Eu usei uma solução muito simples. Incluí um elemento HTML, que chama o método, no meu componente Vue que seleciono, usando o Vanilla JS, e aciono o clique!

No componente Vue, incluí algo como o seguinte:

<span data-id="btnReload" @click="fetchTaskList()"><i class="fa fa-refresh"></i></span>

Que eu uso usando o Vanilla JS:

const btnReload = document.querySelector('[data-id="btnReload"]');
btnReload.click();