Vue.js 在所有 vue 组件模板中使用 lodash

发布于04月22日

我可以在所有vue组件中使用lodash _吗？

例如:

我有如下组织的组件:

App.vue > Parent.vue > Child.vue

我希望我的所有组件都能访问_个lodash，而不必在每个组件vm data中定义

===

我也在try 使用Mixins.它起作用了.但结果并不是预期的_().isEmpty()而不是_.isEmpty()

推荐答案

当前的一些答案可能适用于您的场景，但它们也有缺点:

另一种方法是将库添加到Vue原型中.所有组件都继承自此，因此它们现在都可以从this关键字访问您的库.

import _ from 'lodash';    
Object.defineProperty(Vue.prototype, '$_', { value: _ });

现在，lodash可以作为所有组件的实例方法.在一个.vue文件您可以在不导入任何内容的情况下执行此操作:

export default {
  created() {
    console.log(this.$_.isEmpty(null));
  }
}

使用Object.defineProperty而不是普通属性赋值的优点是，您可以定义一个描述符，该描述符允许您将属性设置为只读(默认情况下为只读).这将阻止消费组件覆盖它.

这一点在我写的this blog post篇文章中有更详细的解释.

Note:这种方法的缺点是，即使只需要一两个函数，也可以获得整个Lodash库.如果这是一个问题，最好在需要它的文件顶部使用import { reduce, whatever } from "lodash";.