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下为Event handler传递动态参数的代码
Jan 06 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
node内置调试方法总结
Feb 22 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python创造虚拟环境方法总结
2019/03/04 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
python实现宿舍管理系统
2019/11/22 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
办公室主任岗位职责
2013/11/08 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
离婚财产分割协议书
2015/08/11 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Python OpenGL基本配置方式
2022/05/20 Python