filters访问methods中的方法,methods中使用过滤器的方法

一、methods中使用过滤器的方法

1.一种方法是采用全局过滤器
设置全局的filter的方法

Vue.filter(‘name’，function (val) {})

在methods中使用全局的filter：

Vue.filters['filterName'] (val)

2.设置当前组件的方法

filter: {
  functionName (val) {
  // logic process
  }
}

在methods中使用局部的filter:

this.$options.filters['filterName'] (val)

例子：

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 
  	}
  }
  // ...
})

二、filters访问methods中的方法

全局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中的一个方法
},

参考文章：https://blog.youkuaiyun.com/fredricen/article/details/107165890