正文 

当前位置： 首页 > 源码 >

如何在 vue 组件中重用全局 javascript 文件

     2023-02-23     34

关键词：

【中文标题】如何在 vue 组件中重用全局 javascript 文件【英文标题】：How to reuse a global javascript file within a vue component 【发布时间】：2017-05-24 11:21:31 【问题描述】：

我有一个从 lang.min.js 创建的 Lang 对象：

https://github.com/rmariuzzo/Lang.js

在我的 Laravel 应用程序中，app.js 中有以下内容：

import SearchToggle from './components/toggle.vue'
import Lang from './lang.min.js'
...
Vue.component('toggle', Toggle);
...
var lang = new Lang();
lang.setMessages(require('./messages.js'));
console.log(lang.getLocale());
console.log(lang.get('main.specialties'));
...

lang 对象没有错误并设法按预期输出 get。

现在我在以下目录中有一个 vue 组件，如上图所示导入： ressource/assets/js/components/toggle.vue

在脚本部分：

<script>
export default
        data()
            return 
                text_holder: lang.get('main.specialties'),

            
        ,
  ...

但是这不起作用。它抱怨 lang 未定义。 我想我错过了 javascript 范围的差距（概念）。我认为如果所有内容都在 app.js 中并被导入，那么 var lang 将在全局范围内，我将被允许在导入的任何地方使用它（类似于 vendor 来自 php） 我猜不是。

现在我该怎么办？ 在每个 vue 组件上导入一个导入（但是我必须确保向后的路径是正确的，并且多次加载相同的对象/message.js 会使 javascript 膨胀。

感谢 JS 的帮助。

【问题讨论】：

vuejs.org/v2/guide/state-management.html @ceejayoz 但来自 lang.min.js 的对象不是状态 - 它是一个参考对象，将其消息加载到 json 文件格式中。所以它就像携带一个配置的静态数组。 【参考方案1】：

创建您的lang.js，并导出 lang 实例

var lang = new Lang();
lang.setMessages(require('./messages.js'));
...
export default lang;

然后您可以在组件中导入和使用该实例

import lang from 'path/to/lang'

export default 
  data () 
    return 
      text_holder: lang.get('main.specialties'),
      ...

另一种方法是写plugins，你可以将lang注入Vue，这样你就可以在你的组件中访问lang。

【讨论】：

不会在每个组件中导入它会使 vue 膨胀吗？ 不，javascript中的import只会导入一次模块 所以你说如果我有 16 个组件并且所有这些组件 import 同一个文件 javascript 实际上只导入一次？ 是的，你可以试试。 我尝试了您的导出解决方案，但在组件中使用时得到以下结果：[Vue warn]: Error when evaluating expression "lang.get('main.specialties')": TypeError: Cannot read property 'get' of undefined (found in component: &lt;toggle&gt;)

如何导出 Vue 组件并在任何 html 页面传递参数中重用它？

】如何导出Vue组件并在任何html页面传递参数中重用它？【英文标题】：HowtoExportVuecomponentandreuseitinanyhtmlpagepassingparameters?【发布时间】：2021-10-1100:28:20【问题描述】：我是Vue3的新手，我刚刚创建了我的第一个真实的Vue项目。我想... 查看详情

如何在 Storybook 中注册全局 Vue 组件？

】如何在Storybook中注册全局Vue组件？【英文标题】：HowtoregisterglobalVuecomponentsinStorybook?【发布时间】：2021-04-2817:34:33【问题描述】：有没有办法在Storybook中注册全局Vue组件，使其与Vue-CLI中全局注册的Vue组件兼容？【问题讨论】：... 查看详情

如何在 laravel nova 中创建可重用的 vue 组件？

】如何在laravelnova中创建可重用的vue组件？【英文标题】：Howtocreatereusablevuecomponentsinlaravelnova?【发布时间】：2020-03-0918:22:11【问题描述】：如何使用Vue在LaravelNova中实现可重用组件？我阅读了文档，但找不到这样的示例。我想在... 查看详情

如何在全局 vue 组件中调用方法？

】如何在全局vue组件中调用方法？【英文标题】：HowcanIcallmethodinglobalvuecomponent?【发布时间】：2017-12-1900:37:39【问题描述】：我有根vue组件app.js：...constapp=newVue(el:\'#app\',...methods:modalShow:function(target,id=null,message=null)...,...);我有一... 查看详情

javascript如何在vue中全局注册组件？(代码片段)

查看详情

Vue.js2：如何重用组件内定义的常量

】Vue.js2：如何重用组件内定义的常量【英文标题】：Vue.js2:Howtoreuseaconstantdefinedinsideacomponent【发布时间】：2018-02-1720:49:06【问题描述】：所以我想在挂载的函数中定义一个const值。并且想在vue组件的方法中使用这个const值。例子... 查看详情

Vue - 重用方法的最佳方式

...】：在vue2中-重用vue方法的正确做法是什么？与其在每个组件中编写它们，不如让它们全局化的最佳方法是什么？【问题讨论】：【参考方案1】：在Vue2中没有真正好的代码重用机制，它们只是变通方法，有时如果没有精心设计... 查看详情

如何在单个文件组件中使用 VueJS 2 全局组件？

】如何在单个文件组件中使用VueJS2全局组件？【英文标题】：HowtouseVueJS2globalcomponentsinsidesinglefilecomponents?【发布时间】：2017-03-1222:17:57【问题描述】：我正在尝试在单个文件组件中使用全局注册的组件（带有Vue.component），但我... 查看详情

重用组件时如何触发转换？

】重用组件时如何触发转换？【英文标题】：Howtotriggeratransitionwhenacomponentisreused?【发布时间】：2017-02-1320:30:35【问题描述】：在同一个组件之间切换时如何触发切换？（对于vue-router1，有一个canReuse钩子。它在vue-router2中不再存... 查看详情

跨页面重用相同组件（具有相同道具）的最佳方法

】跨页面重用相同组件（具有相同道具）的最佳方法【英文标题】：Bestapproachtoreusethesamecomponent(withsameprops)acrossthepages【发布时间】：2019-05-2804:37:33【问题描述】：我用的是vue-cli3.在main.js中注册了全局模态组件：Vue.component(\'Modal\... 查看详情

如何将全局变量调用到 vue 组件中？

】如何将全局变量调用到vue组件中？【英文标题】：howtocallglobalvariableintovuecomponent?【发布时间】：2018-09-0315:23:18【问题描述】：我的母版页中有此代码。如何在我的vue模板中调用这个变量。我认为我调用变量的方式是错误的，... 查看详情

如何在vue中建立全局引用或者全局命令

1一般在vue中，有很多vue组件，这些组件每个都是一个文件。都可能需要引用到到相同模块。我们不想每个文件都import一次模块。如果是vue编写的插件我们可以用Vue.use(...)  2但是如果想添加一个全局命令，同时又让每个vue... 查看详情

vue-组件

组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩... 查看详情

如何在我的 Vue Graphql 组件中使用错误并让其他错误在全局范围内处理？

】如何在我的VueGraphql组件中使用错误并让其他错误在全局范围内处理？【英文标题】：HowDoIconsumeerrorsinmyVueGraphqlcomponentandletothererrorsbehandledglobally?【发布时间】：2021-06-2106:32:17【问题描述】：我们将Vue与apollo一起使用，但我很难... 查看详情

[vue]全局组件和局部组件(嵌套+props引用父组件数据)(代码片段)

全局组件-全局组件定义(体会一下重用性)<divid="app"><!--重用性--><my-awsome></my-awsome><my-awsome></my-awsome><my-awsome></my-awsome><!--组件中使用数据--><my-aws 查看详情

如何在组件中使用全局常量(代码片段)

...nst││├──const.js│││└──main.js└──...第二步，如何在const.js文件下，设置常量exportdefaultinstall(Vue,options)Vue.prototype.global=title:‘全局‘,isBack:true,isAdd:false,;第三步，在main.js下全局引入：//引入全局常量importconstantfrom‘./con... 查看详情

vue中如何构建js调用的全局组件

参考技术AVue可以通过全局注册来实现全局组件的功能，比如有这么一个组件exampleComponent，如果想把它注册成全局组件的话，只需要在引入Vue的文件里调用Vue.component(\'example-component\',exampleComponent)来实现，又或者如同大部分Vue的ui... 查看详情

vue组件之全局组件与局部组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以 is 特性扩展... 查看详情