快捷導(dǎo)航

Vue中自定義全局組件的實(shí)現(xiàn)方法

更新時(shí)間：2017年12月08日 11:30:13 作者：羅高

這兩天學(xué)習(xí)了Vue.js 感覺組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

有時(shí)候我們?cè)谧鲩_發(fā)的時(shí)候，就想自己寫一個(gè)插件然后就可以使用自己的插件，那種成就感很強(qiáng)。今天就解決了一個(gè)長期困擾著我的問題，現(xiàn)在記錄一下，供日后參考。

涉及知識(shí)點(diǎn)是Vue.js官網(wǎng)教程中的插件使用

方法如下：

首先我遇到的問題就是我自定義的組件如果需要在項(xiàng)目中其他組件中多次被調(diào)用，而我之前的解決方法就是簡單的，哪里需要在哪引用。這無疑增加了許多代碼重復(fù)。

而在使用Vue.js的一些UI框架的時(shí)候則注意到，只需要在項(xiàng)目的入口文件中import這個(gè)插件然后在接著Vue.use(‘插件名')。這樣就能在整個(gè)項(xiàng)目里面使用這個(gè)框架中的組件以及方法了。

查閱資料后發(fā)現(xiàn)，自定義的組件需要提供一個(gè)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

像這樣引入自己編寫好的組件，然后創(chuàng)建一個(gè)對(duì)象，并包含一個(gè)install方法，并使用Vue.component()方法注冊(cè)成Vue全局組件，最后export default導(dǎo)出這個(gè)對(duì)象。

到此最關(guān)鍵的步驟已經(jīng)做好，接下來是最最關(guān)鍵的步驟。

我們需要在項(xiàng)目的入口文件中引入剛剛做好的組件，并且通過Vue.use(引入的組件)來使用插件。

到此，一個(gè)全局Vue組件就弄好了。我們?cè)谔峁﹊nstall方法的同時(shí)也可以通過Vue.$emit()的方法來觸發(fā)組件中的方法，但最近在使用Element UI時(shí)發(fā)現(xiàn)他們組件中的方法一般都是通過Vue.$refs()來觸發(fā)的。具體原因留到日后再做研究。

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節(jié)點(diǎn)的消耗
    }
  }
})
</script>

一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個(gè)dom節(jié)點(diǎn)，然后在獲取input1的值。

但是用ref綁定之后，我們就不需要在獲取dom節(jié)點(diǎn)了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。

然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點(diǎn)的消耗了

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: