Vue中自定义全局组件的实现方法


Posted in Javascript onDecember 08, 2017

前言

有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。今天就解决了一个长期困扰着我的问题,现在记录一下,供日后参考。

涉及知识点是Vue.js官网教程中的插件使用

方法如下:

首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用。这无疑增加了许多代码重复。

而在使用Vue.js的一些UI框架的时候则注意到,只需要在项目的入口文件中import这个插件然后在接着Vue.use(‘插件名')。这样就能在整个项目里面使用这个框架中的组件以及方法了。

查阅资料后发现,自定义的组件需要提供一个install方法

import sideblockComponent from './sideBlock'
const defaultComponentName = 'sidebar'

const Sidebar = {
 install(Vue, options = {}) {
 const componentName = options.componentName || defaultComponentName //提供可选的组件名
 Vue.component(componentName, sideblockComponent)
 }
}
export default Sidebar

像这样 引入自己编写好的组件,然后创建一个对象,并包含一个install方法,并使用Vue.component()方法注册成Vue全局组件,最后export default导出这个对象。

到此最关键的步骤已经做好,接下来是最最关键的步骤。

我们需要在项目的入口文件中引入刚刚做好的组件,并且通过Vue.use(引入的组件)来使用插件。

到此,一个全局Vue组件就弄好了。我们在提供install方法的同时也可以通过Vue.$emit()的方法来触发组件中的方法,但最近在使用Element UI时发现他们组件中的方法一般都是通过Vue.$refs()来触发的。具体原因留到日后再做研究。

vue $refs的基本用法

<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。

但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。

然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
Vue中的Vux配置指南
Dec 08 #Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 #Javascript
vue axios 二次封装的示例代码
Dec 08 #Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 #Javascript
js断点调试心得分享(必看篇)
Dec 08 #Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 #Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 #Javascript
You might like
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
微信支付扫码支付php版
2016/07/22 PHP
yii2安装详细流程
2018/05/23 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
js导出txt示例代码
2014/01/14 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
scrapy爬虫实例分享
2017/12/28 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python中turtle库的使用实例
2019/09/09 Python
tensorflow 查看梯度方式
2020/02/04 Python
python文件和文件夹复制函数
2020/02/07 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
简述 Python 的类和对象
2020/08/21 Python
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
服装机修工岗位职责
2013/12/26 职场文书
校园环保标语
2014/06/13 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python