vue 提取公共的方法

LogicEcho
• 阅读 5088
1. 创建文件夹 以及 JS文件 用来存放公共的方法

vue 提取公共的方法
vue 提取公共的方法
common.js 文件中内容如下

const commonData = () => {
    console.log('我是公共的方法')
}
export { commonData }
2. ① 在 main.js 文件中全局引入,并在 vue 的原型链 (prototype) 中注册
// 引入 common.js
import { commonData } from './utils/common.js'
// 将 common 配置给 Vue 的 $common 成员
Vue.prototype.$commonData = commonData
然后在需要用到该方法的组件文件中使用,如下图
<template>
  <div></div>
</template>

<script>
export default {
  created() {
    this.$commonData();
  }
};
</script>

<style lang="less" scoped>
</style>
2. ② 在需要用到该方法的组件文件中局部引用
import { commonData } from '../utils/common.js'
<script>
export default {
    created() {
        commonData();
      }
};
</script>
点赞
收藏
评论区
推荐文章
代码哈士奇 代码哈士奇
4年前
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
效果如下数据来源为uniCloud云数据库照片来源为网络代码来源为我的毕业设计在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/68857ab4a9c485bbbd98c94ad98fb490.png)鼠标未放到软件上面之前在这里插入图片描述(ht
代码哈士奇 代码哈士奇
4年前
vue实现桌面向网页拖动文件(可显示图片/音频/视频)
效果在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/062771391
Wesley13 Wesley13
3年前
java简单的用户登录界面+mysql
1.概述一个简单的swing登录界面,使用了简单的JDBC.如图:!在这里插入图片描述(https://imgblog.csdnimg.cn/20191210013512615.png)!在这里插入图片描述(https://imgblog.csdnimg.cn/20191210013543435.png)2.UI
Stella981 Stella981
3年前
Dataway header传参
import'net.hasor.dataql.fx.web.WebUdfSource'aswebData;returnwebData.getHeader("name");!在这里插入图片描述(https://imgblog.csdnimg.cn/20200506120538153.png?xossproce
Stella981 Stella981
3年前
Redis未授权访问漏洞复现学习
0x00前言前段时间看到想复现学习一下,然后就忘了越临近考试越不想复习!在这里插入图片描述(https://oscimg.oschina.net/oscnet/ec73a943a3d9e18184946ee4c4ca290e14f.jpg)常见的未授权访问漏洞Redis未授权访问漏洞MongoDB未授权访问漏
Wesley13 Wesley13
3年前
ubuntu18.04 安装go语言开发环境
一、安装golang首先查看系统上有没有go的版本!在这里插入图片描述(https://imgblog.csdnimg.cn/202009130910377.pngpic_center)若没有go的版本,通过系统包安装!在这里插入图片描述(https://imgblog.csdnimg.cn/20200913091
Stella981 Stella981
3年前
Flutter 使用Android Studio 创建第一个应用
Flutter使用AndroidStudio创建第一个应用1创建应用!在这里插入图片描述(https://oscimg.oschina.net/oscnet/up9ecc5b3e45c9c29188c11613841f0917.png)2选择Flutterapplication!在这里插入图
Wesley13 Wesley13
3年前
mysql查询每个学生的各科成绩,以及总分和平均分
今天看一个mysql教程,看到一个例子,感觉里面的解决方案不是很合理。问题如下:有学生表:!在这里插入图片描述(https://oscimg.oschina.net/oscnet/07b001b0c6cb7e0038a9299e768fc00a0d3.png)成绩表:!在这里插入图片描述(https://oscimg.o
Stella981 Stella981
3年前
IDEA实用教程(十一)—— 使用Maven创建JavaSE项目
1.第一步!在这里插入图片描述(https://oscimg.oschina.net/oscnet/d3e5173f0fa64c563e87c8084c6c3cd6304.png)2.第二步!在这里插入图片描述(https://oscimg.oschina.net/oscnet/b4b322d915146536a8e0c2b1942b0
Stella981 Stella981
3年前
HQChart使用教程1
@TOC(快速创建一个K线图页面)效果图!在这里插入图片描述(https://imgblog.csdnimg.cn/20190516213202367.png?xossprocessimage/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4
Wesley13 Wesley13
3年前
TCP 协议面试灵魂 12 问 !
先亮出这篇文章的思维导图!在这里插入图片描述(https://imgblog.csdnimg.cn/2020092419341957.png?xossprocessimage/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlamp