张燕涛写于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中对组件,变量,函数的全局引入的更多相关文章

  1. 构建前端第9篇之(上)---Vue组件引入,使用

    张艳涛写于2020-1-25日 一.想写下vue引入组件和插件的理解 今天是星期一,周末也看俩两天,在这个几天了,比较迷,主要是从开始学习import指令开始的,import 是es6的语法, imp ...

  2. Vue 中数据流组件

    好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...

  3. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  4. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  5. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  6. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  7. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  9. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

随机推荐

  1. 「模拟8.23」阴阳 DP

    对于此题的性质我们考虑DP 分四种情况 黑色块在右侧单调降,单调升 还有在左侧 另外我们这样可能会记重,所以还要将重复记过的也就是边界线是横的和竖的 然后还要将全白全黑加上 1 #include< ...

  2. 自动删除n天前的日志(此处用于业务删除xml文件)

    Linux应用总结:自动删除n天前的日志 linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快 ...

  3. django 导出excel react下载 --- 导出并下载

    Dajngo查询数据,查询出来之后生成Excel保存本地 class ExportExcel(APIView): def post(self, request, *args, **kwargs): e ...

  4. Java实现工厂模式

    工厂模式(Factory),当需要根据运行时的一些条件来决定创建具体对象时,就应该考虑使用工厂设计模式,将创建对象的任务交给工厂集中处理. 工厂模式有多种写法,总体分为简单工厂模式和抽象工厂模式 工厂 ...

  5. redis优化小建议

    1.优化的一些小建议 1.尽量使用短的key 当然在精简的同时,不要为了key的"见名知意".对于value有些也可精简,比如性别使用0.1. 2.每个redis设置合理内存 每个 ...

  6. 从 Vue parseHTML 来学习正则表达式

    从 Vue parseHTML 所用正则来学习常用正则语法 Vue parseHTML 中所用的所有正则如下.常见正则规则可参见附录 1,Vue parseHTML 正则所用规则均可在其中找到定义. ...

  7. NUC980 运行 RT-Thread 驱动 SPI 接口 OLED 播放 badapple

    badapple 是什么,上网随便查了下,没看出个究竟,不过有个关于这个挺火的标签或者主题 < 有屏幕的地方就有 badapple >,网上有很多人用很多方式播放 badapple 动画, ...

  8. idea debug无法启动 Error running 'Tomcat8': Unable to open debugger port (127.0.0.1:50168): java.net.SocketException "socket closed

    在日志里显示在 event log 里的 Error running 'server_web': Address localhost:1099 is already in use 显示1099单口已被 ...

  9. keycloak~管理平台的查询bug与自定rest中文检索

    对于keycloak来说,它的管理平台在它的源码中的admin-client中,它会定义相关的rest接口规范:在我们使用keycloak管理平台时,其中有一个组的查询,在我们查询中文组时,它是不支持 ...

  10. 利用ONT测序检测真核生物全基因组甲基化状态

    摘要 甲基化在真核生物基因组序列中广泛存在,其中5mC最为普遍,在真核生物基因组中也有发现6mA.捕获基因组中的甲基化状态的常用技术是全基因组甲基化测序(WGBS)和简化甲基化测序(RRBS),而随着 ...