构建前端第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