Vue公司電話兄弟姐妹的方法

Question

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

---

my-form.vue 

methods:{ 
    save(){} 
} 

如何通過我的按鈕調用保存（）從我的形式？

Answer 1

您可以使用事件總線：

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

全部工作示例：https://jsfiddle.net/arvidkahl/gxdn6ycv/17/