如何在Vue.js中的组件之间传递数据

Question

我的页面上有很多帮助按钮。

单击按钮后，axios将获得帮助，并以json形式返回（组件vue-ob-button-help）

如何使用返回值更新帮助div（组件vue-ob-help）并将其向下滑动

如何将数据从vue-ob-button-help传递到vue-ob-help？

到目前为止，我在page.php中

 ...
<vue-ob-button-help help-id=12></vue-ob-button-help>
<vue-ob-help help-id=12"></div>
...
<vue-ob-button-help help-id=25></vue-ob-button-help>
<vue-ob-help help-id=25></div>

和js中。

      Vue.component('vue-ob-help', {
            props: ['helpId'],
            methods: {},
            template: '<div class="help-block"></div>'
        });

     Vue.component('vue-ob-button-help', {
                props: ['helpId'],
                methods: {
                    getHelp: function (event) {
                        var e = event.currentTarget;
                        var id = this.helpId;
                        axios.get("/a_help/help?id=" + this.helpId)
                            .then(function (r) {
                                if (r.data.label) {
                                    if (r.data.linkUpdate) {
                                        r.data.label = '<a href="' + r.data.linkUpdate + '" class="float-right ob-btn-link mr-3"><i class="fas fa-pencil-alt"></i></a>' + r.data.label;
                                    }
                                    r.data.label = '<button class="close" type="button">×</button>' + r.data.label;

                                    // this is what is working with Jquery and I want to change it to vue
                                    //
                                    // var target = '#help_' + this.helpId;
                                    // $(target).html(r.label).slideDown();
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                },
                template: '<button type="button" v-on:click="getHelp($event)">help</button>'
            });