构建前端第12篇之---在Vue中对组件,变量,函数的全局引入
张燕涛写于2020-01-16 星期two
本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到
//src/index.js中
export default {
version: '2.15.0',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
...
};
就蒙了,es6入门中提到的所有用法中,没有这个export default { xx,yy,zz};只是说了export default 函数,export default变量,这个{xx,yy,zz}怎么理解呢?
那么现在猜想只能是
var object ={xx,yy,zz} ;
export default obj;
那么到main.js中
import ElementUI from 'element-ui' // addedbyzty 2020-1-19 Vue.use(ElementUI)
现在解析import ElementUI from 'element-ui',这个我现在理解为一个对象,默认导出的那个对象
如果你直接想 在使用El-Input标签的时候, 不应该这样用吗?ElementUI.ELInput,Element.其他...的吗?
因为Element是对象,引用对象的属性就应该是这样的...
如果你忽略了Vue.use(ElementUI)这个思路是对的,接下来看use(ElementUI)做了什么
/* Automatically generated by './build/bin/build-entry.js' */ import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js';
import DropdownMenu from '../packages/dropdown-menu/index.js';
... const components = [
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
... const install = function(Vue, opts = {}) {
locale.use(opts.locale);
locale.i18n(opts.i18n); components.forEach(component => {
Vue.component(component.name, component);
}); Vue.use(InfiniteScroll);
Vue.use(Loading.directive); Vue.prototype.$ELEMENT = {
size: opts.size || '',
zIndex: opts.zIndex || 2000
}; Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message; }; /* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
} export default {
version: '2.15.0',
locale: locale.use,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
Dialog,
Autocomplete,
Dropdown,
...
};
说明,Vue.use(),直接调用Element的install方法,这个install主要做了俩个事情分别针对vue组件和函数
先说vue组件
const components = [
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input, ]; const install = function(Vue, opts = {}) { components.forEach(component => {
Vue.component(component.name, component);
});
上边的代码就是vue注册组件的过程,只不过是使用了forEach循环,vue官网有组件注册:https://cn.vuejs.org/v2/guide/components-registration.html
简单说下分两步
//这些组件是全局注册的。
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ }) new Vue({ el: '#app' }) //使用
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
那么就理解了,我们在.vue中使用<el-input>标签是因为el-input 被全局注册了
那么在看函数的全局使用//src/index.js中
const install = function(Vue, opts = {}) {
...
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message; };
可见,这里对全局函数进行了prototype进行了挂载,使用了$loading,$message作为全局函数名,那么在vuejs中就能通过this.$mesage()调用了
(this在子组件中,$message挂在Vue实例中,子组件没这个方法啊?错,原型链有继承特性,子类能使用父类的方法,和什么对象都继承了Object的特性一样)
那么通过分析, import ElementUI from 'element-ui' 还是理解成对象, export default {xx,yy,zz}其实一直都有见过,只是没注意,或许选择性忽略,在
任何*.vue文件中
<script>
import emitter from 'element-ui/src/mixins/emitter';
import Migrating from 'element-ui/src/mixins/migrating';
import calcTextareaHeight from './calcTextareaHeight';
import merge from 'element-ui/src/utils/merge';
import {isKorean} from 'element-ui/src/utils/shared'; export default {
name: 'ElInput', componentName: 'ElInput', mixins: [emitter, Migrating], inheritAttrs: false, inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
}, data() {
return {
textareaCalcStyle: {},
hovering: false,
focused: false,
isComposing: false,
passwordVisible: false
};
},
...
}
都有这个 export default 不就是导出的一个对象吗? 学点东西真费劲
end
构建前端第12篇之---在Vue中对组件,变量,函数的全局引入的更多相关文章
- 构建前端第9篇之(上)---Vue组件引入,使用
张艳涛写于2020-1-25日 一.想写下vue引入组件和插件的理解 今天是星期一,周末也看俩两天,在这个几天了,比较迷,主要是从开始学习import指令开始的,import 是es6的语法, imp ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 中的组件
VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
随机推荐
- asp.net core配合vue实现后端验证码逻辑
概述 网上的前端验证码逻辑总感觉不安全,验证码建议还是使用后端配合验证. 如果产品确定可以上网的话,就可以使用腾讯,百度等第三方验证,对接方便.但是产品可能内网部署,就必须自己写了. 本文章就是基于这 ...
- 【题解】滑雪 luogu1434 记忆化搜索
记忆化搜索入门题 题目 Michael喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道在 ...
- c++性能测试工具:google benchmark进阶(一)
这是c++性能测试工具教程的第四篇文章,从本篇开始我将逐步介绍一些性能测试的高级技巧. 前三篇教程可以看这里: c++性能测试工具:google benchmark入门(一) c++性能测试工具:go ...
- npm i安装命令中的-g -D -S的区别
-g为全局安装 -D 对模块进行局部安装,模块写入到 devDependencies 对象 用于开发阶段,开发时用到的工具等 -S 局部安装,不同的是模块写入到 dependencies对象 用于生产 ...
- [HTML]图像标签<img>的用法、属性及路径问题
图像标签:<img> 用法:<img src = "图像地址"> 图像标签的属性 属性 说明 src 指明图像的地址(分为相对路径和绝对路径两 ...
- 基于C#的socket编程的TCP同步实现
该博客源著地址https://www.cnblogs.com/sunev/archive/2012/08/05/2604189.html 一.摘要 总结一下基于C#的TCP传输协议的涉及到的常用方法及 ...
- 103、kickstart自动化安装操作系统
103.1.前言: 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装. 常规的办法有: 光盘安装系统===>一个 ...
- 1、Centos7下安装Oracle11gR2及多实例
实验环境: 系统:2核8G内存60G硬盘,centos7.4: 优化操作:已经关闭了防火墙.selinux,/etc/hosts文件中以添加"172.16.1.92 slave-node2& ...
- Mysql 主键的操作
主键:primary key ,主要的键.一张表只能有一个字段可以使用对应的键,用来唯一的约束字段里面的数据,数据不能重复,这种键称之为主键,一张表只能最多有一个主键. 一.增加主键 方法一:在 ...
- Docker中容器的备份和恢复(可迁移)
官方文档 备份容器 - save 查看镜像$ docker images 容器快照 - commit$ docker commit CONTAINER xxx/exampleimage-backup: ...