在所有 vue 组件模板中使用 loash

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

例如:

我将组件组织如下:

App.vue > Parent.vue > Child.vue

我希望我的所有组件访问 _ loash，而不需要在每个组件 vmdata中定义

===

我也尝试使用 混音器。它的工作。但结果不像这样的 _().isEmpty()而不是 _.isEmpty()

88436 次浏览
小开

您可以将 lodash导入到每个组件中:

<script>
import _ from 'lodash'


export default {
methods: {
test (value) {
return _.isEmpty(value)
}
}
}
</script>
小开

对于与 js 模块代码分离的内联模板，它应该使用:

  Vue.component('some-tag', {
computed: {
_() {
return _;
}
}
});

然后你可以在模板中使用它在 “本地人”的方式-_.isEmpty(value)。

小开

您可以像这样在全球导入 lodash

window._ = require('lodash');

一旦导入了它，您就可以从任何地方访问 _。

小开

您可以像这样使用 plugin/Mixin。

import _ from 'lodash';
exports default {
install : function(Vue, options){
Vue.mixin({
computed : {
"_" : function(){
return _;
}
}
});
}
}
小开

看看这个！ 这是一种新的包装器，用于在 vue 中使用 loash。 你可以称之为使用

Vue. _. Random (20)//用于获取介于20之间的随机数

This. _. Random (20)//或其他要使用的方法

在任何组件文件中:)

小开
最佳答案

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

  • 添加到 window对象意味着您的 Vue 项目不能被服务器呈现，因为服务器不能访问 window对象。
  • 在每个文件中导入都可以很好地工作，但是如果您必须记住在每个文件中导入，那么这将是一个痛苦的过程。

另一种方法是将库添加到 Vue 原型中。所有组件都继承了这一点，因此它们现在都能够通过 this关键字访问库。

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

现在所有组件都可以使用 loash 作为实例方法。在一个。Vue 文件你不需要导入任何东西就可以做到这一点:

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

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

这在 这篇博文(我写的)中有更详细的解释。

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

小开

一个对我有用的简单方法:

Vue.set(Vue.prototype, '_', _);

这应该允许您在所有组件模板和 vue 实例中使用 _。

小开

虽然有点晚了，但是通过我的研究，我找到了一种方法，可以把 loash 和其他的库导入到我所有的。Vue 文件，我遇到了网络包 提供插件，它实现了一切要求的 OP 几乎没有什么大惊小怪。要实现这个解决方案，请遵循这个奇妙的 教程。

我要指出的是，在本教程中，他将 import "jquery"保留在 app.js 文件中，这是不需要的。自动导入的插件。

小开 
import _ from 'lodash'
Vue.prototype._ = _

在 main.js 文件中插入这些代码行，它就可以在所有应用程序中工作。

小开

您还可以创建一个基本组件，并让所有组件对其进行扩展。

// base-component
import _ from 'lodash';


export default Vue.extend({
computed: {
_() {
return _;
},
},
});

// my-component
import BaseComponent from 'path/to/base-vue';


export default BaseComponent.extend({
template: '<p>Lodash is available: \{\{!!_}}</p>'
methods: {
doSomehting() {
// `this._` should be available
},
},
});

这种方法的 赞成不具有侵入性，因此将来不可能与 Vue 发生冲突。此外，您还可以向 BaseComponent 添加更多内容，如其他库和外部服务，并且它们对所有其他组件都可用。

骗局更加详细，您必须记住从基本组件继承。

小开

对于有价值的用户

转到主频道 JS

import _ from 'lodash'
Vue.set(Vue.prototype, '$_', _)

对于 nuxt.js 用户

在插件文件夹中创建 main.js

Plugin/main.js

import _ from 'lodash'
Vue.set(Vue.prototype, '$_', _)

然后加入 Nuxt.config.js

  plugins: ['~plugins/main.js'],

Vue 和 nuxt js 中的用法是相同的

然后在组件中使用

this.$_.map(arra,(x)=>{})
小开

正确的方法是这样使用 提供/注射:

import _ from 'lodash';


const app = createApp({
provide: {
$_: _,
}
});

然后在第 n 部分:

<script>
export default {
name: 'аnоthег-component',
inject: [
'$_'
]
}
</script>

提交答案