在 Vue Options API 中，同一组件内 methods 间调用应直接使用 this.方法名()，因所有 methods 均绑定在组件实例上；需确保方法已定义、避免箭头函数导致 this 失效，且不推荐用 this.$options.methods 调用。
在 Vue Options API 中，同一个组件内的 methods 之间互相调用非常直接：**用 this.方法名() 即可**。这是因为所有 methods 都绑定在组件实例上，this 指向当前组件实例，天然可以访问自身所有 methods 和 data。
同一组件内方法互相调用（最常用）
这是最基础、最推荐的方式。无需额外处理，直接通过 this 调用：
- 被调用的方法必须已定义在 methods 对象中
- 调用时注意 this 的上下文 —— 在普通 function 声明中，this 指向组件实例；若用箭头函数，则 this 不再指向实例，会导致调用失败
- 方法间调用不区分顺序，即使被调用的方法写在后面也能正常执行
示例：
export default {
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
this.logUpdate(); // ✅ 正确：调用同组件另一个方法
},
logUpdate() {
console.log(`当前数量：${this.count}`);
},
reset() {
this.count = 0;
this.logUpdate(); // ✅ 同样适用
}
}
}
避免使用 this.$options.methods 调用
虽然 this.$options.methods.xxx() 在某些旧代码或特殊场景（如动态方法名）中可见，但不推荐日常使用：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 它绕过响应式系统和 this 绑定逻辑，可能引发意外行为（例如 this 在被调方法内部变为 undefined）
- 无法访问 setup() 中定义的组合式逻辑（Vue 3 Options API 下仍受限）
- 可读性差，不符合 Vue 开发惯例
错误示范（应避免）：
methods: {
badExample() {
this.$options.methods.logUpdate(); // ❌ 不必要且易出错
}
}
跨组件调用：父子组件间方法通信
如果目标方法在另一个组件里（比如子组件），Options API 中需配合 ref + $refs 实现父调子，或 $emit 实现子调父：
-
父组件调子组件方法：给子组件加 ref，通过
this.$refs.refName.methodName()调用 -
子组件调父组件方法：子组件触发事件
this.$emit('event-name')，父组件用@event-name="handler"监听并执行对应 methods
注意：Vue 3 中子组件需显式通过 defineExpose 暴露方法（Options API 下默认全部暴露，但 Composition API 需主动 expose）。
常见陷阱与建议
实际开发中容易忽略的关键点：
- 确保方法名拼写完全一致（区分大小写）
- 不要在 data 函数或 computed 中直接调用 methods —— 它们不是响应式依赖的合法来源，应改用 method 或 watch
- 异步操作中（如 Promise.then 内），保持 this 指向稳定：优先用普通函数声明，或用箭头函数捕获外部 this（但仅限于不依赖组件实例的场景）
- 如果方法需要复用到多个组件，考虑抽离为工具函数或使用 provide/inject，而非强行跨组件调用
