Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/394.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何通知父组件Vue动态组件中发生了什么?_Javascript_Vue.js_Vuejs2_Vue Component_Vue Dynamic Components - Fatal编程技术网

Javascript 如何通知父组件Vue动态组件中发生了什么?

Javascript 如何通知父组件Vue动态组件中发生了什么?,javascript,vue.js,vuejs2,vue-component,vue-dynamic-components,Javascript,Vue.js,Vuejs2,Vue Component,Vue Dynamic Components,我有一个生成动态组件的Vue组件,在该动态组件中有一个按钮的点击处理程序,该按钮用于进行Ajax调用。Ajax调用成功完成后,我想通知生成动态组件的组件Ajax调用已经完成。我该怎么做 该守则的基本结构如下: <template> <div> <!-- Other markup here. --> <div class="contentPlaceholder"> </div>

我有一个生成动态组件的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>
但两者似乎都不起作用。谢谢。

b勾选:=>{console.logthis}

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

另一个选项是创建一个已经有权访问外部的函数,并在方法中调用它

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

这是一个很好的观点,我已经相应地编辑了我的原始问题。基本上,我认为我不能这样做,因为我也在本地为动态组件声明了一个数据属性,所以我需要为这些方法保留这个属性。我的错。还有别的办法吗?谢谢。是的,这很有效。感觉有点邋遢,不像Vue,但效果不错。我现在会坚持这一点,但仍然想知道是否有更好的方法来实现这一点。谢谢。@HartleySan,EventBus呢?:是的,这个主意不错。谢谢。那么,我明天会适当地修改我的答案。可能是
const method = () => {
  console.log('I have access to outer this', this)
}
...
btnCicked: function () { method(); console.log('Local this', this) }
...