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 $on
toe aan de instantie $root
en roep elk ander onderdeel aan dat toegang heeft tot de $root
en $emit
functie.
Op eerste component
.... gemonteerd() { this.$root.$on('component1', () => { // je code komt hier deze.c1methode() } }
en roep in de tweede component de functie $emit
aan 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:
- 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');
- Overal waar we de doelfunctie willen activeren, we activeren het niet, we zenden gewoon deze gebeurtenis uit:
eventBus.$emit('fireMethod');
- 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 ref
ingesteld, kun je de c1method
van 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()