Vue.js 将Vue筛选器显式导入到组件中

我有一个全局过滤器文件，我正试图显式地将一个过滤器导入到一个组件中

在我的过滤器文件中，我有：

//filters.js
import Vue from 'vue';
Vue.filter('shorten', (str, len) => (str.length > len ? `${str.substring(0, len)}...` : str));
Vue.filter('secToMin', (dur) => Math.ceil (dur / 60));

然后在我的组件中，我想做一些类似的事情：

//MyComponent.vue
import secToMin from './util/filters.js';
export default {
 filters: {
   secToMin: { secToMin, },
 },
};

---

但这实际上并没有触发过滤器。是否可以执行类似操作？？？

您可以将过滤器导出为命名导出：

导出函数缩短（str，len）{
返回str.length>len？`${str.substring（0，len）}…`:str；
}
导出函数secToMin（dur）{
返回数学单元（dur/60）；
}

然后在组件中：

从'./util/filters.js'导入{secToMin}；
导出默认值{
过滤器：{
门托明
}
};

filters文件看起来并没有实际导出任何内容，它只是在Vue中全局注册过滤器。如果过滤器已经在全局注册，为什么要在本地注册？我们的想法是这些过滤器可能需要在其他组件中可以访问，这是为了避免在其他地方重写该功能。那么，你是说你不再想在全球范围内注册这些过滤器，而是想在本地单独导入它们？没错。啊，这很有意义！！我想我只能使用Vue.filter。谢谢大家!@b约克兰使用

Vue.filter

用于注册全局筛选器。它直接类似于

Vue.component

或

Vue.directive

。如果您只需要在单个组件上本地使用filter/component/directive，则无需使用这些函数中的任何一个。