Vue调用兄弟的方法

Question

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

---

my-form.vue

methods:{
   save(){}
}

如何通过my-button从my-form调用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/