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
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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
世界收音机发展史
2021/03/01 无线电
德生H-501的评价与改造
2021/03/02 无线电
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
PHP微商城开源代码实例
2019/03/27 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
layui实现文件或图片上传记录
2018/08/28 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python通过字典映射函数实现switch
2020/11/06 Python
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
退伍老兵事迹材料
2014/01/31 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
总经理司机岗位职责
2015/04/10 职场文书
公司人事任命通知
2015/04/20 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers