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 滑入滑出效果实现代码
Mar 27 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
js图片上传的封装代码
Aug 01 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python 中 Meta Classes详解
2016/02/13 Python
python小白切忌乱用表达式
2020/05/29 Python
Python 创建守护进程的示例
2020/09/29 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
python中re模块知识点总结
2021/01/17 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
党员个人公开承诺书
2014/08/29 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
师德师风整改措施
2014/10/24 职场文书
2015年植树节活动总结
2015/02/06 职场文书
行政申诉状范文
2015/05/20 职场文书
未婚证明格式
2015/06/15 职场文书
大学新生入学感想
2015/08/07 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS