使用Vue如何製作自訂全域元件

這兩天學習了Vue.js 感覺元件這個地方知識點挺多的，而且很重要，所以這篇文章主要給大家介紹了關於Vue中自訂全域元件的實作方法，文中透過範例程式碼介紹的非常詳細，對大家學習或使用vue具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

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

涉及知識點是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的基本用法

<p id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</p>

<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中使用axios實作檔案上傳

使用gulp如何建立完整的專案流程

在js中如何實作將陣列加入物件

以上是使用Vue如何製作自訂全域元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！