Vue中自定义全局组件的实现方法
2017-12-08 11:30
1061 查看
前言
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。今天就解决了一个长期困扰着我的问题,现在记录一下,供日后参考。
涉及知识点是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节点的消耗了
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- vue 自定义全局方法,在组件里面的使用介绍
- vue--自定义全局方法,在组件里面使用
- yii2高级应用之自定义组件实现全局使用图片上传功能的方法
- vue--自定义全局方法,在组件里面使用
- vue脚手架中自定义全局组件的方法
- 利用vue组件自定义v-model实现一个Tab组件方法示例
- 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
- vue2.0父子组件间通信的实现方法
- vue开发:vue全局组件的方法
- React Native自定义标题栏组件的实现方法
- Vue.js实现一个自定义分页组件vue-paginaiton
- 自定义vue全局组件use使用、vuex的使用详解
- vue 组件 全局注册与局部注册的方法
- 利用Vue实现移动端图片轮播组件的方法实例
- 添加自定义vue全局方法,同时给自定义的方法 传递component调用其方法
- vue组件传递对象中实现单向绑定的方法
- Vue.use自定义全局组件示例
- 三步搞定自定义Vue全局组件
- Vue.use自定义自己的全局组件
- vue.2.0-自定义全局组件