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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
WebPack基础知识详解
Jan 16 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
JavaScript如何借用构造函数继承
Nov 06 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
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
Python中print和return的作用及区别解析
2019/05/05 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Django values()和value_list()的使用
2020/03/31 Python
Python super()函数使用及多重继承
2020/05/06 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
YII2 全局异常处理深入讲解
2021/03/24 PHP
周鸿祎:教你写创业计划书
2013/12/30 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers