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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
js实现倒计时秒杀效果
Mar 25 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
PHP URL路由类实例
2013/11/12 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python版百度语音识别功能
2019/07/09 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
元旦联欢会感言
2014/03/04 职场文书
电台编导求职信
2014/05/06 职场文书
计算机专业求职信
2014/06/02 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript