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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
javascript操作css属性
Dec 30 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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的hash算法介绍
2014/02/13 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
JS实现多物体运动的方法详解
2018/01/23 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
在Python的Django框架中编写编译函数
2015/07/20 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
不假外出检讨书
2014/01/27 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
基层党员公开承诺书
2014/05/29 职场文书
2014年调度员工作总结
2014/11/19 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
教师个人年度总结
2015/02/11 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
如何使用vue3打造一个物料库
2021/05/08 Vue.js
Python如何使用循环结构和分支结构
2022/04/13 Python