vue filter写成公共方法

Vue中的filter是用来对数据进行格式化或者处理的函数，可以在模板中使用，以实现对数据的自定义过滤。而将filter写成公共方法，可以用于多个组件中，提高代码的复用性。

首先，在Vue的实例中定义一个全局过滤器方法，可以通过Vue.filter()来实现。方法接收两个参数，第一个参数为过滤器的名称，第二个参数为过滤器的具体实现函数。

假设我们要实现一个时间戳格式化的过滤器方法，将时间戳转换为指定格式的时间字符串，我们可以在Vue实例中定义如下的全局过滤器方法：

Vue.filter('formatDate', function(timestamp) {
  // 具体的时间格式化逻辑
  // ...
  return formattedDate;
});

然后，在需要使用该过滤器的组件中，可以直接在模板中使用过滤器。例如：

<template>
  <div>{{ timestamp | formatDate }}</div>
</template>

在上述示例中，我们使用了名为"formatDate"的过滤器，将timestamp作为参数传入过滤器方法中，并将过滤器的返回值直接显示在模板中。这样就实现了在多个组件中复用了这个过滤器方法。

需要注意的是，如果希望在单个组件中使用自定义的过滤器方法，可以在组件的选项中定义一个局部过滤器方法，然后在模板中使用该局部过滤器。例如：

export default {
  filters: {
    formatDate(timestamp) {
      // 具体的时间格式化逻辑
      // ...
      return formattedDate;
    }
  }
}

<template>
  <div>{{ timestamp | formatDate }}</div>
</template>

这样定义的局部过滤器方法只在当前组件中有效，不会影响到其他组件。

总结起来，将Vue的filter写成公共方法，可以通过定义全局过滤器方法或者局部过滤器方法，实现在多个组件中复用，并提高代码的可维护性和复用性。