méthode de frères et soeurs d'appel Vue

Question

<root> 
    <my-button @click="save()"/> 
    <my-form/> 
</root> 

---

my-form.vue 

methods:{ 
    save(){} 
} 

Comment appeler sauver() de ma forme via my-bouton?

Answer 1

Vous pouvez utiliser un bus d'événements:

let EventBus = new Vue(); 

let MyButton= Vue.extend({ 
    name: "my-button", 
    props: ["what"], 
    template: ` 
    <button class="btn btn-md btn-success the-button" @click="save()">Sender: {{what}}</button> 
    `, 
    methods: { 
    save: function(){ 
     EventBus.$emit("form.save", //pass payload here); 
    } 
    } 
}); 

Vue.component("my-button", MyButton); 

***my-form.vue:**** 

created(){ 
    EventBus.$on('form.save', (payload)=>{ 
     this.save(payload) 
    }); 
}, 
methods:{ 
    save(payload) {} 
} 

échantillon de travail complet: https://jsfiddle.net/arvidkahl/gxdn6ycv/17/