javascript - framework - Llamar a un método de componente Vue.js desde fuera del componente

framework vue js

Question

Digamos que tengo una instancia principal de Vue que tiene componentes secundarios. ¿Hay alguna forma de llamar a un método que pertenece a uno de estos componentes desde fuera de la instancia de Vue por completo?

Aquí hay un ejemplo:

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>

Entonces, cuando hago clic en el botón interno, el método increaseCount() está vinculado a su evento de clic, por lo que se llama. No hay forma de vincular el evento al botón externo, cuyo evento de clic estoy escuchando con jQuery, por lo que necesitaré alguna otra forma de llamar a increaseCount .

EDITAR

Parece que esto funciona:

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

Sin embargo, esta no es una buena solución porque estoy haciendo referencia al componente por su índice en la matriz secundaria, y con muchos componentes es poco probable que se mantenga constante y el código es menos legible.

Answer 1

Al final, opté por usar la directiva de ref de Vue . Esto permite que un componente sea referenciado desde el padre para acceso directo.

P.ej

Tener un competidor registrado en mi instancia principal:

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

Renderice el componente en template / html con una referencia:

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

Ahora, en otro lugar puedo acceder al componente externamente

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

Vea este violín para ver un ejemplo: https://jsfiddle.net/xmqgnbu3/1/

(antiguo ejemplo con Vue 1: https://jsfiddle.net/6v7y6msr/ )

Answer 2

Aquí hay uno simple

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

Answer 3

Desde Vue2 esto aplica:

var bus = new Vue()

// en el método del componente A

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

// en el gancho creado por el componente B

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

  // ...
})

Vea here los documentos de Vue. Y here hay más detalles sobre cómo configurar este bus de eventos exactamente.

Si desea obtener más información sobre cuándo usar propiedades, eventos y / o administración de estado centralizada, consulte este artículo .

Answer 4

Digamos que tiene un child_method() en el componente hijo:

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

Ahora desea ejecutar el child_method desde el componente padre:

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

Si desea ejecutar un método de componente primario desde el componente secundario:

this.$parent.name_of_method()

NOTA: No se recomienda acceder al componente secundario y primario de esta manera.

En cambio, como práctica recomendada, use Props & Events para la comunicación entre padres e hijos.

Si desea comunicación entre componentes, seguramente use vuex o here

Por favor lea este article muy útil

Answer 5

Esta es una manera simple de acceder a los métodos de un componente desde otro 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'');
   }
}

Answer 6

He usado una solución muy simple. He incluido un elemento HTML, que llama al método, en mi Componente Vue que selecciono, usando Vanilla JS, ¡y disparo el clic!

En el componente Vue, he incluido algo como lo siguiente:

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

Que uso usando Vanilla JS:

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

Answer 7

Puede establecer la referencia para los componentes secundarios y luego en la función principal puede llamar a través de $ refs:

Añadir referencia al componente hijo:

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

Añadir evento de clic al padre:

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

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

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

Answer 8

Puedes usar el sistema de eventos Vue

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

y

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

Aquí está el violín: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

Answer 9

Una versión ligeramente diferente (más simple) de la respuesta aceptada:

Tener un componente registrado en la instancia principal:

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

Renderice el componente en template / html con una referencia:

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

Acceda al método componente:

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