Vue基础教程（36）Vue.js语法方法选项之方法之间调用：Vue.js方法调用指南：让你的组件方法像乐高一样拼装！

最新推荐文章于 2025-11-24 03:44:17 发布

原创

最新推荐文章于 2025-11-24 03:44:17 发布 · 880 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

一、开篇：Vue方法调用，不就是个“找朋友”的游戏吗？

嘿，Vue开发者们！有没有遇到过这种尴尬时刻：你在一个方法里兴高采烈地调用另一个方法，结果浏览器冷冷地抛出一句“undefined is not a function”？那一刻，是不是感觉像在派对上叫错了朋友的名字？

别慌，这几乎是每个Vue新手必经的“成人礼”。其实，Vue中方法之间的调用，本质上就是个“找朋友”的游戏。只要搞清楚作用域和this的指向这两个规则，你的方法们就能像熟络的老友一样默契协作。

想象一下，你的Vue组件就是一个中央厨房（Kitchen），data里的数据是食材，methods里的方法就是各位厨师。西红柿炒蛋厨师（cookTomatoEgg）需要请切菜师傅（cutVegetables）帮忙备料，如果切菜师傅不在厨房（作用域）里，或者西红柿炒蛋厨师大声喊错了名字（this指向错误），那这道菜可就做不成了。

今天，咱们就抛开枯燥的教科书，用一场“厨房大戏”把Vue方法调用的那点事儿彻底讲明白。文末还有一个可即食（复制粘贴就能跑）的完整示例，包你看完后，方法调用再也不是难题！

二、基础篇：同个组件内，方法们怎么“串门”？

在同一个Vue组件内部，方法之间互相调用是最常见的场景。规则很简单：通过 this.方法名 来呼叫。

1. 经典场景：按钮点击触发一连串操作

假设我们有一个“点赞”组件。用户点击“点赞”按钮后，我们需要：1. 增加点赞数；2. 高亮按钮；3. 发送通知。

<template>
  <div>
    <button @click="handleLike">给我点赞！</button>
    <p>点赞数：{
  
  { likes }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likes: 0
    }
  },
  methods: {
    // 主方法：处理点赞点击
    handleLike() {
      this.incrementLikes();    // 调用：增加点赞数
      this.highlightButton();   // 调用：高亮按钮
      this.sendNotification();  // 调用：发送通知
    },
    // 子方法1：增加点赞数
    incrementLikes() {
      this.likes += 1;
      console.log('点赞数+1，当前为：', this.likes);
    },
    // 子方法2：高亮按钮（这里用log模拟）
    highlightButton() {
      console.log('按钮已高亮，感谢点赞！');
    },
    // 子方法3：发送通知
    sendNotification() {
      console.log('已通知作者：有人点赞啦！');
    }
  }
}
</script>

关键点分析：

this 就是你的通行证：在handleLike方法内部，this指向当前Vue组件实例。所以，this.incrementLikes就能准确找到同一个methods对象下的incrementLikes方法。
调用顺序就是执行顺序：方法会按照你写的顺序依次执行。这里会先增加点赞数，然后高亮按钮，最后发送通知。

2. 新手必坑区：箭头函数搞乱this指向！

这是一个高频踩坑点！看看下面的代码，你能找出问题吗？

// ❌ 错误示范！
methods: {
  fetchData: () => {
    console.log(this); // 输出：undefined 或 Window对象！
    this.processData(); // 报错：TypeError: this.processData is not a function
  },
  processData() {
    // 处理数据
  }
}

为啥会这样？

箭头函数（=>）没有自己的this！它的this会继承自外层作用域（可能是全局作用域或父级函数）。
在Vue选项中，正确做法是使用普通函数，这样Vue才能把this正确绑定到组件实例上。

✅ 正确写法：

methods: {
  // 用普通函数定义
  fetchData() {
    console.log(this); // 输出：Vue组件实例，没错！
    this.processData(); // 成功调用！
  },
  processData() {
    // 处理数据
  }
}

记住这个铁律：在Vue的 methods、computed