Vue中自定义全局组件的实现方法

站长资源 2024/11/28 佚名

2 0 1

前言

有时候我们在做开发的时候，就想自己写一个插件然后就可以使用自己的插件，那种成就感很强。今天就解决了一个长期困扰着我的问题，现在记录一下，供日后参考。

涉及知识点是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,全局组件,vue,2全局组件

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Vue中自定义全局组件的实现方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

Vue中自定义全局组件的实现方法

Javascript中的作用域及块级作用域

Vue中的Vux配置指南

评论“Vue中自定义全局组件的实现方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接