vue中的公共方法调用方式
更新时间：2022年09月21日 14:06:55 作者：酷jjs
这篇文章主要介绍了vue中的公共方法调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue公共方法调用
首先，在assets文件夹下，新建js文件夹，创建common.js
export default {
text(){
console.log("测试，测试！！！")
}
}（1）如果是全局（多页面）使用
1.在main.js中引入
/* 引入公共js*/ import common from '@/assets/js/common.js' Vue.prototype.common=common;
2.在vue中使用
this.common.text(); //测试，测试！！！
（2）如果是单页面使用
1.在vue的script中引入
import common from '@/assets/js/common.js'
2.在vue中使用
common.text(); //测试，测试！！！
区别：static文件夹一般用来存放外部资源；assets文件夹一般存放自身资源
vue如何封装和调用公共方法
业务中经常会碰见同一方法需要多次调用，这时候如果每次都写一遍就显得代码不够优雅了，所以封装公共方法是非常有必要的
第一步：
封装公共方法
1.在vue项目中src/assets/js/创建js文件 例：common.js
2.在main.js 引用common->然后实例化
/* 引入公共函数 */ import common from './assets/js/common' Vue.use(common);
3.common.js写一个示例
export default {
install(Vue) {
Vue.prototype.hand = function() {
alert("a");
};
}
};这里我们就封装好了示例公共方法,接着我们如何显示调用
调用公共方法
1.在任何一个vue文件里面的生命周期this.方法名就可以了，因为已经在main.js全局实例化了
created(){
this.hand()
}2.页面就会调用方法
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue.config.js中配置Vue的路径别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue3中vite使用sass的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要为大家详细介绍了vue.js开发环境的安装教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了如何使用Vue3实现HTML内容预览功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
本文主要介绍了Vue3 全局切换字体大小的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-03-03
解决element-ui el-input赋值后不能编辑的问题
这篇文章主要介绍了解决element-ui el-input赋值后不能编辑的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要给大家介绍了关于vue中事件绑定的相关资料,事件绑定在Web开发中非常常见,我们经常需要在页面中为某个DOM元素绑定事件,如点击、鼠标移动、键盘敲击等等,需要的朋友可以参考下2023-09-09
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下2022-06-06
这篇文章介绍了vue3手动设置滚动条位置自动定位功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-12-12
这篇文章主要介绍了如何在 Vue 3 中生成动态的 Word 文档,在开发过程中遇到一个需求,动态生成一个word报表,当时考虑了是前端做还是后端做的问题,最后发现两个解决需求的方法都大差不差,但考虑到前端少发一个请求,就此使用的前端来解决,需要的朋友可以参考下2024-09-09
最新评论