从 vuejs 组件中创建的钩子调用方法

Posted 2023-02-23

【中文标题】从 vuejs 组件中创建的钩子调用方法

【英文标题】：calling a method from created hook in vuejs component

【发布时间】：2018-09-27 01:46:51

【问题描述】：

我有一个包含以下（部分）代码的组件：

export default 

  methods: 
    mymethod: (x) => alert(x),
  ,

  created: () => 
    this.mymethod('success');
  ,

我收到以下错误：

vue.esm.js?efeb:578 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'mymethod' of undefined"

似乎“this”没有被评估为组件的 vue 实例。 有什么想法可以解决这个问题？

【参考方案1】：

在定义 Vue 方法、生命周期方法、计算属性时……最好不要使用箭头函数，因为那样你会覆盖 Vue 本身推送的 this。试试这个：

export default 
  methods: 
    mymethod (x)  alert(x) ,
  ,
  created () 
    this.mymethod('success');
  ,
  ...

【参考方案2】：

你在 created 钩子中使用了箭头函数。尝试使用

created: function 
   this.mymethod('success');
,

如果您查看vue.js 文档，该文档也明确说明

不要在选项属性或回调上使用箭头函数，例如 创建： () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。由于箭头函数绑定到父级 上下文，这不会是你所期望的 Vue 实例，通常 导致诸如 Uncaught TypeError: Cannot read property 之类的错误 未定义或未捕获的类型错误：this.myMethod 不是函数。

【参考方案3】：

首先将您的钩子方法更改为：

methods: 
  mymethod(x)alert(x);

然后，还要更改创建的钩子函数中调用的方法。它必须看起来像这样：

created()
  this.mymethod('success');

那么你就完成了！