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 相关文章推荐
jQuery实现长文字部分显示代码
May 13 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
微信小程序实现购物车小功能
Dec 30 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中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
JavaScript中Function详解
2015/02/27 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python 简易计算器程序,代码就几行
2009/08/29 Python
利用python代码写的12306订票代码
2015/12/20 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python读取Excel实例详解
2018/08/17 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
高级Java程序员面试题
2016/06/23 面试题
给朋友的道歉信
2014/01/09 职场文书
户外宣传策划方案
2014/05/25 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
离婚协议书样本
2015/01/26 职场文书
扬州个园导游词
2015/02/06 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫