blocks|key|4411733|text|您可以将lodash导入每个组件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4411734|<script>
++import+_+from+'lodash'

++export+default+{
++++methods:+{
++++++test+(value)+{
++++++++return+_.isEmpty(value)
++++++}
++++}
++}
</script>|code-block|syntax|javascript|4411735|entityMap^0|4|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You could import the <code>lodash</code> into each component:

<pre><code>&lt;script&gt;
 import _ from 'lodash'

 export default {
 methods: {
 test (value) {
 return _.isEmpty(value)
 }
 }
 }
&lt;/script&gt;
</code></pre>

blocks|key|4411819|text|import+_+from+'lodash'
Vue.prototype._+=+_|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4411820|在您的main.js文件中插入这些行，它将在您的应用程序中运行。|unstyled|4411821|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>import _ from 'lodash'
Vue.prototype._ = _
</code></pre>

Insert these lines in your main.js file and it will work all over your app.

blocks|key|4411664|text|您可以像这样全局导入lodash|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4411665|window._+=+require('lodash');|code-block|syntax|javascript|4411666|导入后，您将可以从任何位置访问_。|4411667|entityMap^0|A|6|0|0|F|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

You could import <code>lodash</code> globally like this

<pre><code>window._ = require('lodash');
</code></pre>

Once that has been imported, you will have access to <code>_</code> from anywhere.

blocks|key|4411727|text|一种对我有效的简单方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4411728|Vue.set(Vue.prototype,+'_',+_);|offset|length|style|CODE|4411729|这应该允许您在所有组件模板和vue实例中使用_。|4411730|entityMap^0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

A simple approach that worked for me:

<code>Vue.set(Vue.prototype, '_', _);</code>

This should allow you to use _ in all component templates and vue instances.

blocks|key|4411832|text|你可以像这样使用plugin/mixin。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4411833|import+_+from+'lodash';
exports+default+{
++++install+:+function(Vue,+options){
++++++++Vue.mixin({
++++++++++++computed+:+{
++++++++++++++++"_"+:+function(){
++++++++++++++++++++return+_;
++++++++++++++++}
++++++++++++}
++++++++});
++++}
}|code-block|syntax|javascript|4411834|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use plugin/mixin like this.

<pre><code>import _ from 'lodash';
exports default {
 install : function(Vue, options){
 Vue.mixin({
 computed : {
 "_" : function(){
 return _;
 }
 }
 });
 }
}
</code></pre>

blocks|key|4411882|text|参加派对有点晚了，但通过我的研究，我找到了一种方法，可以将lodash和其他库导入到我所有的.vue文件中，我遇到了webpack+ProvidePlugin，它几乎没有大惊小怪地实现了OP所要求的一切。为了实现这个解决方案，遵循这个神奇的tutorial。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4411883|我会注意到，在本教程中，他将import+"jquery"留在了他的app.js文件中，这并不是必需的。插件会自动导入它。|style|CODE|4411884|entityMap|0|LINK|mutability|MUTABLE|url|https://webpack.js.org/plugins/provide-plugin/|1|https://www.youtube.com/watch?v=IYuh8hIyvfE^0|1U|D|0|3C|8|1|0|E|F|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

Bit late to the party but through my research of finding a way to import lodash and other libraries into all my .vue files, I encountered the webpack <a href="https://webpack.js.org/plugins/provide-plugin/" rel="nofollow noreferrer">ProvidePlugin</a>, which achieves everything the OP requested with almost no fuss. To implement this solution, following this fantastic <a href="https://www.youtube.com/watch?v=IYuh8hIyvfE" rel="nofollow noreferrer">tutorial</a>.

I would note that in the tutorial, he left <code>import "jquery"</code> in his app.js file, which is not required. The plugin with import it automatically.

blocks|key|4411939|text|正确的方法是这样使用provide+/+inject：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4411940|import+_+from+'lodash';

const+app+=+createApp({
++++++++provide:+{
++++++++++++$_:+_,
++++++++}
++++});|code-block|syntax|javascript|4411941|然后在аnоthег组件中：|4411942|<script>
++++export+default+{
++++++++name:+'аnоthег-component',
++++++++inject:+[
++++++++++++'$_'
++++++++]
++++}
</script>|4411943|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/guide/components/provide-inject.html^0|A|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

The proper way is to use <a href="https://vuejs.org/guide/components/provide-inject.html" rel="nofollow noreferrer">provide / inject</a> as such:
<pre><code>import _ from 'lodash';

const app = createApp({
 provide: {
 $_: _,
 }
 });
</code></pre>
Then in аnоthег component:
<pre><code>&lt;script&gt;
 export default {
 name: 'аnоthег-component',
 inject: [
 '$_'
 ]
 }
&lt;/script&gt;
</code></pre>

Can I use lodash <code>_</code> in all of my vue component?

for example:

I have components organized like below:

<code>App.vue</code> > <code>Parent.vue</code> > <code>Child.vue</code>

I would like all of my component to access <code>_</code> lodash without defined in every component vm <code>data</code>

===

I am also trying using <a href="https://vuejs.org/guide/mixins.html" rel="noreferrer">Mixins</a>. it works. but the result not expected like this <code>_().isEmpty()</code> instead of <code>_.isEmpty()</code>

Using lodash in all of vue component template

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我可以在我的所有vue组件中使用lodash _吗？例如：我有如下组织的组件：App.vue > Parent.vue > Child.vue我希望我的所有组件都可以访问_ lodash，而无需在每个组件vm data中定义===我也在尝试使用。它起作用了。但是结果不是像这样的_().isEmpty()而不是_.isEmpty()

问在所有vue组件模板中使用lodash
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在所有vue组件模板中使用lodashEN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在所有vue组件模板中使用lodash
EN