将方法添加到Vue原型链上，可以不用传入this

背景

有时候，在开发通用方法的时候，如果方法里面用到了this，我之前的做法是把this传入到方法中使用，

比如：

export function getDictLabel(that, value, dictType) {
	const dictList = that.dict.type[dictType]
	const selected = dictList ? dictList.find(item => item.value == value) : ''
	return selected ? selected.label : value
}

然后在使用的时候，每个地方都要传入this，还是挺麻烦和冗余的，有没有更好的方式，不显示传入this，但是默认能够把this传入方法中？

其实是有的。

解决

在 Vue 开发中，如果想避免每次调用通用 JavaScript 方法时都显式传递 this，可以考虑将这个方法转换成 Vue的实例方法或原型方法。

这样，每个 Vue 组件实例都可以直接访问这个方法，而不需要手动传递 this。

可以通过在全局范围内扩展 Vue.prototype 来实现，或者使用 Vue 插件来封装这些方法。

 import { getDictLabel } from '@/utils/zyjk'

Vue.prototype.getDictLabel = getDictLabel;

在组件中使用方法：

<template>
    <div></div>
</template>

<script>
export default {
    mounted() {
        console.log(this.getDictLabel('someValue', 'someDictType'));
    }
}
</script>

现在在任何组件内，你都可以不需要传递 this，直接使用 getDictLabel 方法。

如果不传入this，那么不同的Vue文件调用该方法的时候，其中的this是对应不同的Vue文件吗？

是的，当你将一个方法添加到 Vue.prototype 上时，这个方法在不同的 Vue 组件实例中调用时，其中的 this 关键字将会自动地指向调用它的那个 Vue 组件实例。

这意味着每个组件的 this 上下文是独立的，可以确保在不同组件中调用这个方法时，this 会根据当前组件的实例自动调整，从而确保每次调用都能正确地访问到其应有的组件数据和属性。