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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 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
Laravel框架路由设置与使用示例
2018/06/12 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
微信小程序日历效果
2018/12/29 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python实现五子棋人机对战游戏
2020/03/25 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
大学生应聘自荐信
2013/10/11 职场文书
数学专业推荐信范文
2013/11/21 职场文书
公司业务员岗位职责
2014/03/18 职场文书
作风年建设汇报材料
2014/08/14 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
郭明义电影观后感
2015/06/08 职场文书
新闻稿怎么写
2015/07/18 职场文书