Vue.js – Methode aanroepen vanuit een ander onderdeel

Ik gebruik Vue.Js v2. Ik wil component1->c1method in component2->c2method aanroepen om gegevens na het indienen opnieuw te laden.

Vue.component('component1', {
  methods: {
    c1method: function(){
     alert('this is c1method')
    },
  }
})
Vue.component('component2', {
  methods: {
    c2method: function(){
     component('component1').c1method()//like this
    },
  }
})

Antwoord 1, autoriteit 100%

Voor niet-ouder-kind relatie, dan is dit dezelfde als deze. Roep één methode aan, blijkbaar elke methode van een component van een andere component. Voeg gewoon een functie $ontoe aan de instantie $rooten roep elk ander onderdeel aan dat toegang heeft tot de $rooten $emitfunctie.

Op eerste component

....
  gemonteerd() {
    this.$root.$on('component1', () => {
      // je code komt hier
      deze.c1methode()
    }
  }

en roep in de tweede component de functie $emitaan in $root

...
  c2-methode: functie(){
   this.$root.$emit('component1') //zoals dit
  },

Het werkt meer als een stopcontact. Referentie hier

https://stackoverflow.com/a/50343039/6090215


Antwoord 2, autoriteit 63%

// Component A
Vue.component('A', {
    created() {
        this.$root.$refs.A = this;
    },
    methods: {
        foo: function() {
            alert('this is A.foo');
        }
    }
});
// Component B
Vue.component('B', {
    methods: {
        bar: function() {
            this.$root.$refs.A.foo();
        }
    }
});

Antwoord 3, autoriteit 39%

Geen hacky-oplossingen nodig.
In vuejs kunnen we evenementen creëren die wereldwijd kunnen worden beluisterd.
Met deze functie zenden we deze gebeurtenis gewoon uit wanneer we onze geliefde functie willen bellen.
We luisteren gewoon de hele tijd naar deze gebeurtenis vanuit de component. wanneer deze wereldwijde gebeurtenis plaatsvindt, kunnen we onze methode uitvoeren die we willen aanroepen.

Het is vrij eenvoudig:

  1. je gaat naar main.js, voordat je de vue-instantie maakt, schrijf je dit:
export const eventBus = new Vue(); // added line
new Vue({
    ...
    ...
    ...
    render: h => h(App)
}).$mount('#app');
  1. Overal waar we de doelfunctie willen activeren, we activeren het niet, we zenden gewoon deze gebeurtenis uit:
eventBus.$emit('fireMethod');
  1. Nu luisteren we in onze component met de doelfunctie altijd naar deze gebeurtenis:
created() {
    eventBus.$on('fireMethod', () => {
            this.myBelovedMethod();
    })
}

Vergeet niet om eventBus bovenaan te importeren.

import {eventBus} from "path/to/main.js";

dat is het, een paar regels code, geen hacky, alle vuejs-kracht.


Antwoord 4, autoriteit 31%

De documenten behandelen deze situatie

https://vuejs.org/v2/guide/ componenten.html#Niet-Ouder-Kind-Communicatie

Als uw componenten dezelfde ouder hebben, kunt u een gebeurtenis uitzenden waar de ouder naar luistert. Met de eigenschap refingesteld, kun je de c1methodvan de ouder aanroepen.

https://vuejs.org/v2/guide/components. html#Child-Component-Refs


Antwoord 5, autoriteit 19%

Probeer dit eens.

<template>
 ...
 <component1 ref='componentOne'>
...
</template>
<script>
  Vue.component('component2', {
    methods: {
     c2method: function(){
       this.$refs.componentOne.c1method();
     }
   }
  });
</script>

Antwoord 6, autoriteit 5%

Als iemand op zoek is naar een oplossing in Vue.js v3:

https://v3.vuejs.org/guide /migratie/events-api.html#event-bus

https://github.com/developit/mitt#install

   import mitt from 'mitt'
    const emitter = mitt()
    // listen to an event
    emitter.on('foo', e => console.log('foo', e) )
    // listen to all events
    emitter.on('*', (type, e) => console.log(type, e) )
    // fire an event
    emitter.emit('foo', { a: 'b' })
    // clearing all events
    emitter.all.clear()

Other episodes