张燕涛写于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. 关于MySQL索引面试题的六连炮!招架的住吗?

    1.面试真题 MySQ索引的原理和数据结构能介绍一下吗? b+树和b-树有什么区别? MySQL聚簇索引和非聚簇索引的区别是什么? 他们分别是如何存储的? 使用MySQL索引都有哪些原则? MySQL ...

  2. 【模板】map入门

    map 在数据特别庞大,数组已经满足不了的某些情况下codevs p1230,可以用上map; 我们可以将map容器作为一个有序的映射表,看作为一个下表可以是任意类型的数组: map是一个红黑树,单次 ...

  3. 数据库创建好之后如何创建scott用户

    SQL> conn / as sysdba Connected. SQL> @%oracle_home%\rdbms\admin\utlsampl.sql 建立完成以后会自动退出sqlpl ...

  4. Linux添加永久静态路由

    1.首先查看一下本机的路由 route -n 2.比如我们添加两条静态路由,访问192.168.142.100时通过192.168.142.10:访问192.168.142.200时通过192.168 ...

  5. Vue(1)Vue安装与使用

    前言 Vue(读音/vjuː/,类似于view) 是一套用于构建前后端分离的框架.刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球"最"流行的前端框架.使用vue开发网页很简单, ...

  6. 微信订阅号中获取openid以及个人信息

    采用的方式是利用另一个服务号获取用户信息. 其中有一个问题就是不关注这个服务号获取不了用户头像等信息.

  7. 用户RFM模型及应用

    RMF含义 R(Recency)(用户粘性,越小越好):用户最近一次交易时间的间隔.R值越大,表示用户交易发生的日期越久,反之则表示用户交易发生的日期越近 F(Frequency)(用户忠诚度,越大越 ...

  8. python3实现几种常见的排序算法

    python3实现几种常见的排序算法 冒泡排序 冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来.走访数列的工作是重复地进行直到没有再需要 ...

  9. Apache Hudi在Hopworks机器学习的应用

    Hopsworks特征存储库统一了在线和批处理应用程序的特征访问而屏蔽了双数据库系统的复杂性.我们构建了一个可靠且高性能的服务,以将特征物化到在线特征存储库,不仅仅保证低延迟访问,而且还保证在服务时间 ...

  10. Linux中ls的用法

    在linux系统中,可以说一切皆文件.文件类型包含:普通文件,目录,字符设备文件,块设备文件,符号链接文件等 我们可以用file这个命令来查看文件的属性: 这里可以看到1.sh是个脚本文件 下面开始介 ...