Vue.use(ElementUI) 做了什么?

开发 前端
Vue 提供了一种插件机制,可以给 Vue 扩充一些属性,其实这个插件比较"可笑",什么也没做。

[[387537]]

本文转载自微信公众号“素燕”(gh_a97f4df5b7b9)。

在使用 ElementUI 组件的时候,通常我们会这么写:

import ElementUI from 'element-ui'; 
Vue.use(ElementUI); 
  • 1.
  • 2.

这样写完后,在我们自定义的组件中既可以直接使用:

<template> 
    <div> 
        <el-button type="primary">我是素燕</el-button> 
    </div> 
</template> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

通过本文我们来分析下它是如何实现的。

Vue 提供了一种插件机制,可以给 Vue 扩充一些属性,其实这个插件比较"可笑",什么也没做,不信看下源码:

Vue 内部只是帮你判断了下有没有重复注册,并调用了你传给它的函数,其实我自已也可以调用,反而饶了一圈,可能框架设计有自己的考虑吧。

按官方的说法,插件可以是一个函数或者是包含install函数的对象。Element-ui 可以一次性把所有的组件引入,也可以引入其中某一个,它内部其实使用的就是插件机制。我们动手自己实现一下:

目录结构如下:

SyElement/index.js:

定义了一个插件,该插件中通过 Vue 提供的全局函数 component 在全局注册了组件 SyInfo 和 SyMessage,看代码:

import SyInfo from './SyInfo/index'; 
import SyMessage from './SyMessage/index'; 
import log from './log'; 
 
export default { 
    install(Vue, options) { 
        // 全局注册组件 SyInfo 
        Vue.component(SyInfo.name, SyInfo); 
        // 全局注册组件 SyMessage 
        Vue.component(SyMessage.name, SyMessage); 
 
        // 给 Vue 添加一个全局函数,该函数可在所有的组件中使用 
        Vue.prototype.$loglog = log; 
    } 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

由于要支持单组件使用,故每个组件其实也是一个插件。

import SyMessage from './src/component.vue'; 
// 提供一个 install 函数 
SyMessage.install = function(Vue) { 
    Vue.component(SyMessage.name, SyMessage); 

 
export default SyMessage; 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

component.vue 就是一个组件的具体实现:

<template> 
    <div class="sy-info"> 
        剖析element-ui的实现方式 
    </div> 
</template> 
 
<script> 
export default { 
    name: 'SyMessage' 

</script> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

SyMessage 和 SyInfo 的实现一样。到此便可以和 Element-ui 一样的方式使用了:

import ElementUI from 'element-ui'; 
Vue.use(ElementUI); 
  • 1.
  • 2.
<template> 
 
    <div> 
        <sy-info></sy-info> 
        <sy-message></sy-message> 
    </div> 
</template> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

多说一句:有时候,有些业务需求需要在每个组件中使用某个服务,比如数据统计,其实可以在 Vue 全局中挂载一个函数,这样在每个组件中即可使用,比如文章提到的 log 就是在全局挂载的一个函数:

Vue.prototype.$loglog = log; 
  • 1.

在所有的组件中既可以这样使用:

this.$log({ 
    uid: 'suyan' 
}); 
  • 1.
  • 2.
  • 3.

 

责任编辑:赵宁宁 来源: 素燕
相关推荐

2022-02-22 13:14:30

Vue自定义指令注册

2011-04-19 10:04:25

NeopPIshell网站后门

2025-02-21 10:01:35

2011-11-29 09:10:11

Hadoop

2020-12-25 09:38:07

Vue前端代码

2021-08-06 22:45:09

人工智能AI

2016-11-17 15:35:51

RxJava操作Subscriber

2015-09-16 15:01:30

PHP内核

2017-12-06 14:35:01

OpenStackCeph存储

2014-08-10 14:35:23

2018-05-22 08:37:02

Ceph存储存储系统

2018-09-27 18:40:21

技术管理项目管理

2018-09-07 09:33:52

技术管理程序员

2022-04-13 14:15:50

人工智能机器人上海

2021-01-03 10:37:50

前端开发技术

2019-06-12 09:50:23

selectMySQLSQL

2017-10-21 10:12:05

戴尔

2010-03-12 14:28:52

三层交换技术

2020-08-13 08:04:31

配置跨域框架

2023-06-07 08:13:46

PixiJSCanvas 库
点赞
收藏

51CTO技术栈公众号