如何通知父组件在 Vue 动态组件中发生了某些事情？

Question

我有一个 Vue 组件，它生成一个动态组件，并且在该动态组件中是一个用于进行 Ajax 调用的按钮的单击处理程序。在成功完成 Ajax 调用后，我想通知生成动态组件的组件 Ajax 调用已完成。我该怎么做？

问题代码的基本结构如下：

<template>
    <div>
        <!-- Other markup here. -->
        <div class="contentPlaceholder">
        </div>
    </div>
</template>

<script>
    export default {
        // Props, etc.
        data: function () {
            return {
                // ...
                content: 'long-html-string-that-contains-Vue-components'
            };
        },
        mounted: function () {
            Vue.component(`content-component`, {
                template: `
                    <div class="content">
                        ${this.content}
                    </div>
                `,
                data: function () {
                    return {
                        // Local data here.
                    };
                }
                methods: {
                    // Button in this.content markup clicked.
                    btnCicked: function () {
                        ajax.post('url', {
                            // Params
                            success: () => {
                                // Want to report back to the parent component
                                // that we're here now.
                            }
                        });
                    }
                }
            });

            const res = Vue.compile(`
                <content-component>
                </content-component>
            `);

            new Vue({
                render: res.render,
                staticRenderFns: res.staticRenderFns
            }).$mount(`.contentPlaceholder`);
        }
    }
</script>

我最初的想法是在 Ajax success 回调中执行 this.$emit('btnClicked', 'data-here')，但是当我尝试在 template 方法的 template 部分中将 @btnClicked 事件处理程序附加到 content-component 时调用或Vue.compile 方法调用，我得到一个 Vue 错误。

基本上，我不知道该怎么做。 this上下文在动态组件中肯定是不一样的，所以我不能只是在父组件中添加一个数据属性，然后在动态组件的Ajax回调中设置。我试过了，还是不行。

我相信有一种简单的方法可以做到这一点，但老实说我不确定如何做。任何帮助将不胜感激。谢谢。

---

编辑：值得注意的是，我尝试将动态组件视为父组件的常规子组件。因此，我在 Ajax success 回调中添加了 this.$emit('btnClicked') 调用，然后将 @btnClicked 处理程序添加到 content-component，但它不起作用。

也许我只是做错了，但我尝试了以下两种方法：

template: `
    <div class="content" @btnClicked="btnClicked">
        ${this.content}
    </div>
`,

// And

const res = Vue.compile(`
    <content-component @btnClicked="btnClicked">
    </content-component>
`);

但似乎两者都不起作用。谢谢。

Answer 1

btnCicked: () => { console.log(this) }.

尝试使用箭头函数保存上下文。

另一种选择是创建一个已经可以访问外部this 的函数，并在您的方法中调用它。

const method = () => {
  console.log('I have access to outer this', this)
}
...
btnCicked: function () { method(); console.log('Local this', this) }
...