Vue中挂载自定义函数到全局的三种方式

最新推荐文章于 2024-01-11 16:59:15 发布
最新推荐文章于 2024-01-11 16:59:15 发布
阅读量246 收藏
点赞数
分类专栏： Work-JavaScript 文章标签： vue.js 前端 javascript
原文链接：https://blog.csdn.net/trustnature/article/details/122486432
版权

在Vue项目中，多次被使用的一些组件会被封装成全局组件在入口文件中引入并全局注册，这样一来每个页面/父组件中都能随时使用这些组件。

就像这类全局组件一般，当自己有一些函数想要封装进全局以便每个页面/组件都能随时调用的话，该如何封装则有不同的几种思路。

网上自己查了下，他人总结了3种方法，转载以便学习。

转自：来源出处

Scorpio_sky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定义全局共用函数详解
01-21
如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 Vue.prototype上。 在main.js中： Vue.prototype.method = function () {} 组件中调用： this.method() 以上这篇vue自定义全局共用函数详解就是小编...
在vue项目中 实现定义全局变量 全局函数操作
01-18
如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处，可能有...
vue3.0 挂载全局api 和 全局自定义方法 或 Provide、inject全局变量和方法
热门推荐
agua001的博客
02-09 1万+
注册全局方法，使用两种方式挂载，两种方式在组件中拿到全局方法并且使用
使用vue3写多个函数挂载在全局，供任意界面使用
最新发布
foreverhui的博客
01-11 831
这样做的好处是，你可以在不同的文件中定义和管理全局函数，使代码更具可读性和可维护性。另外，你也可以根据需要将相关的全局函数组织在不同的文件中，以便更好地管理和维护。在上面的示例中，我们将全局函数 myFunction1 和 myFunction2 定义在单独的文件 globalFunctions.js。然后，在 main.js 中，我们通过 import 引入这些函数，并将其挂载到 Vue。为了更好地组织代码，将全局函数和变量写在单独的文件中，然后在 main.js 中引入它们。
vue怎么把api 挂载到全局_01 - Vue全局API学习：Vue.extend
weixin_39632524的博客
01-14 79
一，用法使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数示例代码：打开浏览器运行代码，可以看到页面显示内容为：My name is zhangsan, I am 18.二，更进一步示例代码：打开浏览器运行代码，可以看到页面显示内容同样为：My name is zhangsan, I am 18...
vue2.0 api接口全局统一挂载
huhaikang的博客
11-26 546
/** * api接口的统一出口 * 批量导入./下的所有模块 * 自动使用js文件名做模块名，所以请不要重复 */ const path = require('path') const files = require.context('./', true, /\.js$/) const modules = {} files.keys().forEach(key => { const name = path.basename(key, '.js') // 回key的最后一...
vue3封装自定义工具函数类,引入全局变量中
tiger_Angle
11-22 1360
{{ $filters.filetrTimes(时间戳的值) }}如:封装处理时间戳函数的。注入到全局app中去。
vue项目中定义全局变量、函数的几种方法
01-21
前言 在项目中，经常会复用一些变量和函数，比如用户的登录token，用户信息等。...1、使用全局变量专用模块，挂载到main.js文件上面 全局变量模块Global.vue定义如下： const token='12345678'; const use
Vue自定义指令封装节流函数的方法示例
08-27
同时，我们还可以将这个指令挂载到全局，以便在整个应用程序中使用。 需要注意的是，在自定义指令中，我们可以传递参数，例如 binding.value()。这个参数可以是一个函数、事件或绑定对象等。我们可以根据需要来传递...
【vue+若依】封装接口全局使用
qq_40282446的博客
02-10 347
比如每个页面上都要使用省市区等接口 可以直接全局挂载
Vue - 自定义函数挂载到全局方法
TrustNature
01-13 2017
在Vue中可以将自定的方法挂载到全局的方法中，这样在全局的页面都可以不通过引用，而直接使用自定义的方法了，在vue中使用非常广泛。 方法一：使用Vue.prorotype 第一中方法与定义全局变量一样，在main.js中进行引入(但因为main.js是入口文件，不推荐在其中写入其他逻辑代码)。在main.js中写入函数: Vue.prototype.getPdf = function (){...
vue 封装全局函数
weixin_56848461的博客
04-11 207
vue 封装全局函数
vue 封装全局函数和全局变量
djh052900的博客
08-11 2066
vue 封装全局函数和全局变量并使用
vue封装函数全局使用
weixin_48503426的博客
11-11 372
在utils文件夹中找到http.js文件。在main.js文件中全局声明一下。在http.js写函数，声明函数。最后在你需要的页面就可以调用了。
Vue 全局方法封装
qq_41114603的博客
09-07 3190
Vue 自定义全局方法 最近一个项目，做移动端页面，对于移动端的接触比较少，所以在项目开始的时候选的ui有点不理想，选择了weui,虽然weui有jquery版本的，但是由于不太想用jquery，所以就选择了weui；结果就有点尴尬了，不知道是我刚刚接触没有发现还是weui本来就没有loading、loading、loading、message等这种全局的方法；只在weui的官网找到了样式，没有...
vue 封装全局方法
weixin_43829905的博客
06-19 2054
vue 封装全局方法vue 封装全局方法 vue 封装全局方法 1，新建一个publicFun.js 文件 export default { publicFun(data1,) { switch (data1) { case 1 : console.log("全局方法调用"+data1)； break; case 2: console.log(data1)； break; default: conso
vue 封装全局函数(把时间转化为多久以前)
weixin_57246351的博客
08-15 237
为了结构清晰,可以单独建个文件保存全局函数,在src目录下建个utils/date.js 写下如下代码 // 导入 moment import moment from 'moment' // 转换时间 - 多久之前 const formatTimeAgo = targetDate => { moment.locale('zh-cn') // 转化为中文,不转化是英文的 return moment(targetDate).from(new Date()) // targetDate 是个形
封装原生的JS，vue中封装全局使用的函数
大脸猫~
08-19 1万+
function fun () { alert (this) //指向的是函数事件调用者 } fun () 这里的this，指向的是window new fn() new 的函数指向的不是window而是指向了该函数新的对象，目的是改变指针，创建对象实例 function fun1 () { this.x= 10 } var aa = new fun1() aa....
如何全局封装并使用方法（Vue）
MoXinXueWEB的博客
05-23 1388
小菜鸟在总结
vue3 main.js中全局挂载函数
03-31
在Vue3中，可以通过createApp方法创建一个Vue实例，并在其上使用全局API来挂载函数。以下是一个示例： ``` import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 全局挂载函数 app.config.globalProperties.$myFunction = () => { console.log('This is my function') } app.mount('#app') ``` 在上面的代码中，我们使用createApp方法创建了一个Vue实例，并在其上使用config.globalProperties来挂载一个名为$myFunction的函数。现在，我们可以在组件中使用该函数： ``` <template> <div> <button @click="$myFunction()">Click me</button> </div> </template> <script> export default { name: 'MyComponent', methods: { myMethod() { this.$myFunction() } } } </script> ``` 在上面的代码中，我们在模板中使用了$myFunction函数，并在方法中也可以使用它。这是因为我们已经将其作为全局函数挂载到了Vue实例中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值