我可以从手表调用方法并安装吗？

Question

我有一个功能（getAllData 执行外部数据查询），我需要在两种情况下调用它：安装组件时和 prop 更改时。

然而，在watch 和mounted 中使用它时，我得到了TypeError: this.getAllData is not a function。

由于methods can be called from methods，我想知道从watch 或mounted 等组件调用的方法是否如此。

我的（简化的）实例如下：

export default {
    props: ['triggerReload'],
    data: function () {
        return {
            // some variables
        }
    },
    watch: {
        triggerReload: this.getAllData()
    },
    methods: {
        getAllData: function () {
            // this function correctly fetches external data
        }
    },
    mounted: this.getAllData()
}

我的解决方法是复制函数的代码（不是 DRY）或调用外部函数（在 Vue 实例之外定义 - 这可能也是一种反模式）编辑：这是一个组件，所以我不知道如何调用外部函数并引用实例（它不是由var vm = new Vue(...) 实例化的）

Answer 1

是的，你可以，只是语法错误，你需要（注意额外的括号）：

...
mounted () {
    this.getAllData()
}

这只是 ES6 的糖

mounted: function mounted () {
    this.getAllData()
}

在您的版本中，当创建对象组件时，您将mounted 绑定到this.getAllData，因此this 将引用当前对象，该对象没有getAllData 方法.您需要在函数中执行此操作，以便 Vue 发挥其魔力并将 this 绑定到正确的 Vue 组件。