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之AJAX框架使用说明
Apr 24 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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(7) php 字符串相关应用
2010/03/05 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python实现两款计算器功能示例
2017/12/19 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
用pycharm开发django项目示例代码
2018/10/24 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
标准自荐信范文
2014/01/29 职场文书
小学体育教学反思
2014/01/31 职场文书
班长自荐书范文
2014/02/11 职场文书
品牌宣传方案
2014/03/21 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
文明之星事迹材料
2014/05/09 职场文书
求职信格式要求
2014/05/23 职场文书
书法大赛策划方案
2014/06/04 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
升学宴来宾致辞
2015/07/27 职场文书
校园运动会广播稿
2015/08/19 职场文书