如何通知父组件 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')，但是当我尝试将 @btnClicked 事件处理程序附加到 content-component 在 Vue.component 方法调用的 template 部分或 Vue.compile 方法调用中，我收到 Vue 错误。

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

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

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

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

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

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

How do I inform the parent component that something has happened in a Vue dynamic component?

javascript

vue.js

vue-component

vuejs2

vue-dynamic-components