正文 

当前位置： 首页 > 知识 >

如何在 Vue 中使用全局函数？

     2023-02-23     164

关键词：

【中文标题】如何在 Vue 中使用全局函数？【英文标题】：How can I use global functions in Vue? 【发布时间】：2021-05-15 00:40:51 【问题描述】：

我有一个日期格式化功能。现在我需要在不同的组件中使用这个方法。这种情况的最佳做法是什么？指示？过滤器？还是有什么不同？我该如何定义？

dateWithoutTime(date) 
  return date ? date.split("T")[0] : ""

【问题讨论】：

创建一个 mixin 并将函数（方法）放入其中，然后在需要该函数的地方包含 mixin。 【参考方案1】：

模块

假设您使用的是 Vue CLI 或等效的捆绑器，最可组合的方式是为实用功能创建一个模块，例如：

utilities.js

export const dateWithoutTime = function(date) 
  return date ? date.split("T")[0] : ""

然后你可以在任何你需要的地方导入这个函数：

SomeComponent.vue

import  dateWithoutTime  from '@/modules/utilities.js'

export default 
  data: () => (
    someDate: new Date()
  ),
  methods: 
    someMethod() 
      return dateWithoutTime(this.someDate);

编辑：你也可以让它成为一种直接从模板中使用它的方法：

methods: 
  dateWithoutTime      // Same as `dateWithoutTime: dateWithoutTime`

Vue.prototype

另一种选择是在实例化您的应用之前在Vue.prototype 上设置函数：

main.js

Vue.prototype.$dateWithoutTime = function(date) 
  return date ? date.split("T")[0] : ""


new Vue(
...
)

那么该函数可以在任何组件中使用，例如：

SomeComponent.vue

export default 
  data: () => (
    someDate: new Date()
  ),
  methods: 
    someMethod() 
      return this.$dateWithoutTime(this.someDate);

【讨论】：

在vue项目中如何定义全局变量全局函数(代码片段)

如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数定义全局变量原理：设置一个专用的的全局变量模块文... 查看详情

如何使用组合 api 调用自定义全局函数 | Vue3

】如何使用组合api调用自定义全局函数|Vue3【英文标题】：Howtocallacustomglobalfunctionusingcompositionapi|vue3【发布时间】：2021-10-2105:26:52【问题描述】：在main.js中，我将axios设置为全局函数。//main.jsimportcreateAppfrom\'vue\';importAppfrom\'./App.v... 查看详情

在vue项目中如何定义全局变量全局函数(代码片段)

写在前面：如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处... 查看详情

如何从挂载的函数中修改全局变量？ Vue.js

】如何从挂载的函数中修改全局变量？Vue.js【英文标题】：Howtomodifyaglobalvariablefromamountedfunction?Vue.js【发布时间】：2020-03-2104:44:38【问题描述】：我是Vue.js的新手，在网上找不到答案。我在\'mounted:\'中有一个函数，我需要它来更... 查看详情

在函数中使用全局变量

...blesinafunction【发布时间】：2022-01-1619:53:30【问题描述】：如何在函数中创建或使用全局变量？如果我在一个函数中创建一个全局变量，如何在另一个函数中使用该全局变量？我是否需要将全局变量存储在需要访问的函数的局部变... 查看详情

在函数中使用全局变量

...blesinafunction【发布时间】：2009-01-0805:45:02【问题描述】：如何在函数中创建或使用全局变量？如果我在一个函数中创建一个全局变量，如何在另一个函数中使用该全局变量？我是否需要将全局变量存储在需要访问的函数的局部变... 查看详情

如何在 TypeScript 中声明一个全局变量并在 Vue 中使用它

】如何在TypeScript中声明一个全局变量并在Vue中使用它【英文标题】：HowcanIdeclareaglobalvariableinTypeScriptanduseitacrossinVue【发布时间】：2019-02-0413:01:05【问题描述】：我有一个ma​​in.ts文件，我想在那里声明一个变量并在所有Vue文件... 查看详情

如何在pyspark函数中使用全局变量

】如何在pyspark函数中使用全局变量【英文标题】：Howtouseglobalvariableinpysparkfunction【发布时间】：2018-06-2317:59:40【问题描述】：首先我在代码开头有两个变量。numericColumnNames=[]categoricalColumnsNames=[];然后在main方法中，我为这些值赋... 查看详情

14.vue定义全局函数

...article/details/73942828方法一：（建议全局函数较少的情况下使用）　　1.在main.js中写入函数　　　　2.在所需的组件中调用即可　　方法二：（建议全局函数较多的情况下使用） 　　1.创建一个自己所需的base.js文件　　　　然后定... 查看详情

如何在点击事件函数中更新 Javascript 全局变量

】如何在点击事件函数中更新Javascript全局变量【英文标题】：HowtoupdateJavascriptglobalvarinsideaclickeventfunction【发布时间】：2013-08-1701:18:15【问题描述】：使用Javascript和jQuery，我正在尝试获取单击事件的鼠标坐标以在其他Javascript函... 查看详情

如何在 Postman 中编写全局函数

】如何在Postman中编写全局函数【英文标题】：HowtoWriteGlobalFunctionsinPostman【发布时间】：2018-01-2206:13:29【问题描述】：我需要帮助编写一个通用函数以在一组请求中使用，这将有助于构建框架。我尝试过使用以下格式以下函数在... 查看详情

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

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

如何在 vue 中隔离/作用域全局 css

】如何在vue中隔离/作用域全局css【英文标题】：Howtoisolate/scopeglobalcssinvue【发布时间】：2019-07-2209:01:30【问题描述】：上下文：我有一个VueCLI项目，由两个主要部分组成：1)客户看到的内容和2)管理员看到的内容。客户部分使用Bo... 查看详情

vue定义全局指令和局部指令

...例中全局指令和局部指令的区别：全局指令可供整个页面使用，而局部指令只作用于他定义的那个vue实例将文本内容全部转换为大写字母定义全局指令创建一个vue实例通过自定义指令将文本转换为大写渲染到页面中定义局部指令... 查看详情

vue自定义函数挂到全局方法(代码片段)

方法一:使用Vue.prototype//在mian.js中写入函数Vue.prototype.getToken=function()...//在所有组件里可调用函数this.getToken();方法二:使用exports.install+Vue.prototype//写好自己需要的fun.js文件exports.install=function(Vue,options)Vue.proto 查看详情

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

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

注册全局组件和局部组件

...ols文件夹并同时创建一个index.vue组件文件②就和我们平时使用普通组件一样，先在使用该组件的文件中导入,在compoents中注册，然后在结构中使用我们的业务组件一般都定义成了局部组件，使用的时候需要在components中注册，而我... 查看详情

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

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