Question

我已经建立了一个文件来保存附加到Vue对象的过滤器，这是required在我的App.js中。但是我有一个过滤器，理想情况下会使用另一个过滤器：

Vue.filter('formatDateTime', value => {
    if (value)  return moment(String(value)).format('DD-MMM-YY hh:mm')
});
Vue.filter('getActivity', value =>
    (!value.lastvisited)
        ? 'Not visited yet' 
        : 'Last logged in ' + Vue.$options.filters.formatDateTime(value.lastvisited)
)

但是它不能引用全局Vue对象，有没有办法解决？我当然可以重复日期格式代码，但我不希望重复。

Answer 1

我通常要做的是创建对您的主要Vue对象的全局引用，例如：

// Create a filter which calls another filter.
Vue.filter('myFilter', () => {
    window.Vue.$options.filters.myOtherFilter(...);
});

// Initialize the main Vue object.
window.Vue = new Vue({

});

然后，您应该能够使用过滤器功能内的window.Vue.$options.filters.myOtherFilter()访问过滤器。

这可能不是理想的选择，但是它在很多情况下都帮助了我，您必须定义一些插件/服务/组件，而这些插件/服务/组件却无法为您提供其使用的当前Vue实例。

Answer 2

一个选择是分开定义和全局注册

（加上它现在在非vue上下文中可用/可导入）

// ie. in filters.js
export const formatDateTime = value => value 
  ? moment(String(value)).format('DD-MMM-YY hh:mm') 
  : null

export const getActivity = value => !value.lastvisited
  ? 'Not visited yet' 
  : 'Last logged in ' + formatDateTime(value.lastvisited)

// ie. in in a filter-global-registration.js
import { getActivity, formatDateTime } from 'filters.js'

Vue.filter('formatDateTime', formatDateTime);
Vue.filter('getActivity', getActivity)

如何在Vue中访问另一个连接的过滤器

2 个答案: