前言

銅梁ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

有時候我們在做開發(fā)的時候，就想自己寫一個插件然后就可以使用自己的插件，那種成就感很強。今天就解決了一個長期困擾著我的問題，現在記錄一下，供日后參考。

涉及知識點是Vue.js官網教程中的插件使用

方法如下：

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

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

查閱資料后發(fā)現，自定義的組件需要提供一個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)建一個對象，并包含一個install方法，并使用Vue.component()方法注冊成Vue全局組件，最后export default導出這個對象。

到此最關鍵的步驟已經做好，接下來是最最關鍵的步驟。

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

到此，一個全局Vue組件就弄好了。我們在提供install方法的同時也可以通過Vue.$emit()的方法來觸發(fā)組件中的方法，但最近在使用Element UI時發(fā)現他們組件中的方法一般都是通過Vue.$refs()來觸發(fā)的。具體原因留到日后再做研究。

vue $refs的基本用法

添加

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

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

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯的支持。