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 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue实现广告栏上下滚动效果
Nov 26 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
技术总监的工作职责
2013/11/13 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
先进工作者申报材料
2014/12/23 职场文书
成绩单评语
2015/01/04 职场文书
政协委员个人总结
2015/03/03 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
如何利用React实现图片识别App
2022/02/18 Javascript