vue组件暴露和.js文件暴露接口操作


Posted in Javascript onAugust 11, 2020

1、将同一类型的组件放在一个文件夹下

2、在此文件夹下创建一个index.js

vue组件暴露和.js文件暴露接口操作

3、在index.js中导入组件,并把他们暴露出去

1、写法一

import studentCourse1 from './studentCourse.vue'
 import studentInfo1 from './studentInfo.vue'
 
 export var studentCourse=studentCourse1
 export var studentInfo=studentInfo1

2、写法二

export var studentCourse=()=>import('./studentCourse.vue')
 export var studentInfo=()=>import('./studentInfo.vue')
 //export var studentInfo=()=>{
 return import('./studentInfo.vue')
 }

4、最后在.vue文件中使用组件

此处你只需引入index.js所在文件夹就行啦

import {studentCourse,studentInfo} from './components/stuCom'
 export default{
 components:{
  'StudentCourse':studentCourse,
  'StudentInfo':studentInfo
  }
 }

1、将.js放在同一个文件夹下

2、同样一定要有一个index.js文件

vue组件暴露和.js文件暴露接口操作

3、 index.js文件内容如下

import auth from './auth.js'
  import error from './error-log.js'
 export default{
 auth,
 error
 }

4、在main.js中

import utils from './utils'

Vue.use(utils.auth,{params})

补充知识:vue项目中将方法名暴露给APP端调用

只需要将methods中的方法赋值到window对象即可

created() {
 window.getParams = this.getParams
},
 
methods: {
 getParams(params) {
  this.id = params.id
  // ...
 },
}

也可以赋值给window对象中的某个对象

以上这篇vue组件暴露和.js文件暴露接口操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 #Javascript
小程序自动化测试的示例代码
Aug 11 #Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 #Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 #Javascript
Vue自定义全局弹窗组件操作
Aug 11 #Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 #Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 #Javascript
You might like
php fckeditor 调用的函数
2009/06/21 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
xmlHTTP实例
2006/10/24 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
如何使用Python调整图像大小
2020/09/26 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
总经理的岗位职责
2014/02/23 职场文书
保护环境倡议书
2014/04/14 职场文书
产品开发计划书
2014/04/27 职场文书
感恩教育活动总结
2014/05/05 职场文书
学校运动会报道稿
2014/09/23 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js