在嵌套方法中访问 vue 模型数据答案

【问题标题】：Accessing vue model data in nested method在嵌套方法中访问 vue 模型数据
【发布时间】：2017-10-14 04:30:11
【问题描述】：

在下面的简单示例中，我在页面加载时在我的 vue 模型中调用我的云服务方法，其中包含一个内部服务特定的生命周期事件afterSubmitContacts()，它在用户执行某些事件时执行。一旦用户执行此事件，就会弹出警告框，并显示undefined 而不是myTest。

通过下面的示例，我的目标是成功访问 vue 模型方法和数据属性，而不是获得未定义。下面场景中访问vue模型数据和方法的正确方法是什么？

提前致谢！

            new Vue({
                el: '#vue-test',
                data: {
                    name: 'myTest',
                },
                template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
                methods: {
                    initCloudService(event) {
                        cloudservice.init({
                            afterSubmitContacts: function (contacts) {
                                alert(this.name); //undefined
                                ...
                    }
                },
                ready() {
                    this.initCloudService();
                }

【问题讨论】：

您可以对afterSubmitContacts 使用箭头函数，例如afterSubmitContacts: contact => alert(this.name) 或在该函数之外提供对 this 预期值的引用，然后通过该函数引用 Vue 实例，例如var self = this; afterSubmitContacts: function(contacts) { alert(self.name); }。如果您能够在项目中使用箭头函数，显然前者是首选。
感谢马蒂的帮助。您能否发布此评论作为答案？第二个建议就像一个魅力。我想让第一个建议也能正常工作，尽管我遇到了编译时错误。假设方法体不仅仅是一个警报和一个以上的参数，你能举一个简单的例子来说明箭头函数示例是如何工作的吗？谢谢

标签： javascript vue.js vuejs2

【解决方案1】：

您丢失了上下文，您的 this 指的是函数本身而不是 Vue 实例。

您可以选择：

调用 VueJS 方法 >

new Vue({
  el: '#vue-test',
    data: {
      name: 'myTest',
    },
    template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
    methods: {
      afterSubmitContacts(contacts) {
        alert(this.name);
        // ...
      },
      initCloudService(event) {
        cloudservice.init({afterSubmitContacts})
      }
    },
    ready() {
    this.initCloudService();
  }
}

改用箭头函数 >

afterSubmitContacts: contacts => {
    alert(this.name);
    // ...
}

自我是一个丑陋的解决方案:)

【讨论】：

【解决方案2】：

这里的问题是afterSubmitContacts 拥有一个常规函数。在执行时，它会根据多个规则 (further reading here) 绑定 this。

代码编写得并不完美（缺少一些闭包以及afterSubmitContacts 的实际调用方式），因此我冒昧地使用您的代码来传递要点。

ES5 解决方案

new Vue({
            el: '#vue-test',
            data: {
                name: 'myTest',
            },
            template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
            methods: {
                initCloudService(event) {
                    self=this;
                    cloudservice.init({
                        afterSubmitContacts: function (contacts) {
                            alert(self.name);
                        }
                    })
                }
            },
            ready() {
                this.initCloudService();
            }
        }

ES6 解决方案

箭头函数不会改变this，所以你仍然可以正常使用。

new Vue({
            el: '#vue-test',
            data: {
                name: 'myTest',
            },
            template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
            methods: {
                initCloudService(event) {
                    cloudservice.init({
                        afterSubmitContacts: (contacts)=> {
                            alert(this.name);
                        }
                    })
                }
            },
            ready() {
                this.initCloudService();
            }
        }

【讨论】：