文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue.use(ElementUI) 做了什么?

2024-12-03 09:32

关注

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

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

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

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

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

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

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

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

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

目录结构如下:

SyElement/index.js:

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

  1. import SyInfo from './SyInfo/index'; 
  2. import SyMessage from './SyMessage/index'; 
  3. import log from './log'; 
  4.  
  5. export default { 
  6.     install(Vue, options) { 
  7.         // 全局注册组件 SyInfo 
  8.         Vue.component(SyInfo.name, SyInfo); 
  9.         // 全局注册组件 SyMessage 
  10.         Vue.component(SyMessage.name, SyMessage); 
  11.  
  12.         // 给 Vue 添加一个全局函数,该函数可在所有的组件中使用 
  13.         Vue.prototype.$loglog = log; 
  14.     } 

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

  1. import SyMessage from './src/component.vue'; 
  2. // 提供一个 install 函数 
  3. SyMessage.install = function(Vue) { 
  4.     Vue.component(SyMessage.name, SyMessage); 
  5.  
  6. export default SyMessage; 

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

  1. <template> 
  2.     <div class="sy-info"> 
  3.         剖析element-ui的实现方式 
  4.     div> 
  5. template> 
  6.  
  7. <script> 
  8. export default { 
  9.     name: 'SyMessage' 
  10. script> 

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

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

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

  1. Vue.prototype.$loglog = log; 

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

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

 

来源:素燕内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯