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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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
thinkPHP事务操作简单案例分析
2019/10/17 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
浅析JS运动
2015/12/28 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Django返回json数据用法示例
2016/09/18 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python输入二维数组方法
2018/04/13 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
银行毕业实习自我鉴定
2013/09/19 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
团队口号大全
2014/06/06 职场文书
趣味运动会开幕词
2015/01/28 职场文书
悬空寺导游词
2015/02/05 职场文书
社区服务理念口号
2015/12/25 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
Redis如何实现分布式锁
2021/08/23 Redis
mysql序号rownum行号实现方式
2022/12/24 MySQL