vue2.X版本中filters访问methods中的方法

问题

我们经常会用到过滤器filter，用于在处理变量的后操作。过滤器可以用在methods中，有两种思路可以实现，一个是采用全局过滤器，以官方文档中的代码为例：

Vue.filter('capitalize', function (value) {
     
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
     
  methods:{
     
  	someMethod(){
     
  		const someValue = 'hello'
  	  	console.log(this.$options.filters['capitalize'](someValue)) // Hello 
  	}
  }
  // ...
})

这样便可以在methods中通过this.$options.filters[filter](...args)的形式调用。

另一个是把公共的方法提取到一个文件中，然后export出来，在需要的时候在import进来，然后在所在的单文件组件中，添加本地过滤器，具体可以参加这篇文章，但是这个方法的缺点也很明显，就是需要本地过滤器再写一次，以便调用公共方法。

然而，filters中是否可以调用methods中的方法，也有网友提出，详见这里，但是并未给出答案。

分析

filters中的方法，都是纯函数，不应该依赖外界或者对外界有所影响。（这是vue故意设计的，符合函数式思维，见Jasin Yip的回答）。全局filters和本地filters是为了避免命名冲突和全局污染。全局filters和局部filters都无法获取this，如想获取，需要采用变通的方法，即在外面传参，在调用过滤器的地方（template模板里面），把this传进去。譬如：

<detail-item label="员工状态" :value="modelDetail.employeeStatus|employeeStatusFilter(this)"></detail-item>

这样就需要改一下过滤器的定义，譬如：

employeeStatusFilter(value, that) {
      // that接受传参this
      // some code
},

还有一点需要注意，通过在template html传参this，并不是Vue实例，而是Vue实例的代理对象，参见下图：

如果要想获得Vue实例，需要调用_self方法，即：

const _this = that._self // _this即为Vue实例

然后，我们就可以调用methods、data中的方法和属性了，即：

employeeStatusFilter(value, that) {
     
      const _this = that._self
      return _this.pickLabel(_this.employeeStatusOptions, value) //pickLabel为methods中的一个方法
},

总结

• template传参
• _self获取Vue实例
• 调用methods中的方法