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语句可以不以;结尾的烦恼
Mar 08 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 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 面向对象 PHP5 中的常量
2010/05/05 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python里隐藏的“禅”
2014/06/16 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
会计专业自我鉴定范文
2013/10/06 职场文书
高一地理教学反思
2014/01/18 职场文书
交警失职检讨书
2015/01/26 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python