在vue中提取公共方法

最新推荐文章于 2023-04-23 13:35:13 发布
最新推荐文章于 2023-04-23 13:35:13 发布
阅读量1.2k 收藏
点赞数
分类专栏： 公共方法 Vue 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44986077/article/details/106827261
版权

首先在utils中创建js写公共的方法
下面是我的一个简单的例子
在这里插入图片描述
top.js是我创建的js方法
下面是top.js的代码

const open = function() {
  console.log(1)
}
export { open }

下面是main.js中引入
在这里插入图片描述
代码如下

import { open } from './utils/top'
Vue.prototype.open = open

最重要的是你要进行触发方法的地方要注册事件
在这里插入图片描述
这样就可以进行正常的操作了

small面包
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli3 DllPlugin 提取公用库的方法
12-12
vue 开发过程中，保存一次就会编译一次，如果能够减少编译的时间，哪怕是一丁点，也能节省不少时间。开发过程中个人编写的源文件才会频繁变动，而一些库文件我们一般是不会去改动的。如果能把这些库文件提取出来，就能减少打包体积，加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。 1、安装相关插件 yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev 2、编写配置文件 在项目根目录下新建 webpack.dll.conf
在vue.js中抽出公共代码的方法示例
12-09
当我们在使用vue构建中大型项目时，通常会遇到某些经常用的方法以及属性，比如说搭建一个员工管理系统，请求的url需要一个共同的前缀，或者在某几个view中需要用到时间，这个时间是通过某方法格式化之后的等等，如果...
vue--提取公共方法
weixin_34211761的博客
10-24 1261
在做一个项目的时候，一些组件内公用的方法可以单独提取出来做复用： 参考：https://www.jb51.net/article/115662.htm 简单示例： 代码： const config = { title:'我是配置的标题', description:'我是配置的描述' } const configFun = function(data)...
Vue抽取公共方法
哈
11-10 1574
第一步：创建目录utils，在其中新建h-utils.js export default { fun(){ console.log("----------- fun -----------") } } 第二步：在main.js中引入 import utils from './utils/h-utils' //在 vue 的原型链 (prototype) 中注册 Vue.prototype.$utils = utils 第三步：使用示例 //页面组件 <el-button @clic
怎样在vuejs里面提取并使用公共方法？
南北极之间
09-01 1585
https://blog.csdn.net/liuxing393724034/article/details/80775065 https://blog.csdn.net/weixin_43254676/article/details/89556671 ES6模块的import和export用法总结 https://www.cnblogs.com/dupd/p/5951311.html
vue抽取公共方法———方法一
weixin_34409741的博客
11-13 1297
方法一：Vue插件 1.概述 作用：满足vue之外的需求，特定场景的需求 比如说，让你在每个单页面组件里，都可以调用某个方法（公共方法），或者共享某个变量等 2.使用方法 【声明插件】- 【写插件】-【注册插件】-【使用插件】 生命插肩和写插件是同时进行的，注册插件到Vue对象中，最后在Vue组件的时候使用写的插件 声明插件 插件的需求都是公共部分，所以会创建文件夹utils，里...
详解webpack打包vue时提取css
08-30
首先，Vue.js 应用中的 CSS 默认是内联在每个组件中，这虽然有利于快速开发和热更新，但在生产环境中，为了提高性能和可维护性，我们需要将 CSS 提取到单独的样式文件中。这可以通过使用 Webpack 插件 `...
Vue一次性简洁明了引入所有公共组件的方法
10-17
本文将详细介绍一种Vue项目中一次性引入所有公共组件的方法。 首先，公共组件是那些在多个页面或组件中复用的组件。例如，模态框、按钮、输入框等。在Vue中，我们通常通过import语句来引入一个或多个特定的组件，并...
在vue项目中,将juery设置为全局变量的方法
12-09
在这个数组中，创建两个新的插件实例：`CommonsChunkPlugin`用于提取公共模块，`ProvidePlugin`则用于全局提供jQuery。配置如下： ```javascript plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js')...
VUE2 抽取公共接口类
羽茉的博客
04-23 270
VUE2 抽取公共接口类
VUE2 抽取公共常量类
羽茉的博客
04-23 434
VUE2 抽取公共常量类
Vue公共方法提取
前方的路在刚开始
06-16 595
vue公用方法的抽离，js写好后，在vue文件的script中导入import {getAll} from '../tools/CommonMethod.js' 然后，在vue中调用 getAll()
vue 提取公共的方法
weixin_43501588的博客
11-19 1246
1. 创建文件夹 以及 JS文件 用来存放公共的方法 common.js 文件中内容如下 const commonData = () => { console.log('我是公共的方法') } export { commonData } 2. ① 在 main.js 文件中全局引入，并在 vue 的原型链 (prototype) 中注册 // 引入 common.js import ...
Vue抽离公共方法并全局注册使用
Web_chicken的博客
06-10 3220
举例说明：抽离一个公共下载方法 创建两个页面的原因是确定全局方法在不同页面都可使用 别忘了在main.js引入router 三、封装axios请求 assets文件夹下新建api文件夹并在此文件下新建home.js 四、创建公共下载方法 在assets文件夹下新建utils文件夹并在此文件下新建downLoadTempFile.js......
vue3.0抽离公共方法，在需要的组件中使用
zhangyubababa的博客
01-08 2427
// message.js import { ref, watch } from "vue"; export function message() { let msg = ref(123); watch(msg, (newVal) => { console.log("msg changed", newVal); }); const changeMessage = () => { msg.value = "new Message"; }; return { msg, changeM
Vue3中提取公用的方法
weixin_57092157的博客
04-19 1634
2.在页面中进行引用。
Vue组件公用方法如何提取mixin
Free雅轩的博客
04-13 624
这篇文章主要介绍了Vue组件公用方法提取mixin实现，多个组件共用一个方法时可以用 mixin 抽取到一个js文件中，作为共用方法，下面一起进入文章了解更多详细内容吧 一.应用场景 多个组件共用一个方法时可以用 mixin 抽取到一个js文件中，作为共用方法 二.实现方法 1.提取js共用方法文件 export const common = { // 组件共用属性 ---------------------------------- data() {
vue公共方法怎么写
alertloveyou的博客
01-13 1834
公共方法： 创建一个js存放公共方法：如在utils文件夹中创建一个timeCheck.js文件 js文件： export default { timeFormat(Time){ var time = new Date(Time); var year = time.getFullYear(); var month = time.getMonth()+1; var date = time.getDate(); var ho
二、Vue学习笔记——提取公共接口
weixin_46737742的博客
07-21 583
创建utils.js文件 封装接口并暴露 export const printA = () => { console.log("A"); }; 组件中引入该方法 import { getRsaCode, printA } from "@/utils/utils"; 注：单个页面组件通常不需要使用所有的公共接口，故在utils文件中使用单独暴露的形式 export const printA = () => { console.log("A"); }; export con.
vue2 提取公共方法
最新发布
08-10
在Vue2中提取公共方法可以使用Vue的插件机制来实现。首先，在一个单独的文件中定义你的公共方法，比如utils.js。在utils.js中，你可以使用export default来导出一个对象，对象中包含你需要提取的公共方法。比如： `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值