Vue中自定義全局組件的實現(xiàn)方法
前言
有時候我們在做開發(fā)的時候，就想自己寫一個插件然后就可以使用自己的插件，那種成就感很強。今天就解決了一個長期困擾著我的問題，現(xiàn)在記錄一下，供日后參考。
涉及知識點是Vue.js官網(wǎng)教程中的插件使用
方法如下：
首先我遇到的問題就是我自定義的組件如果需要在項目中其他組件中多次被調(diào)用，而我之前的解決方法就是簡單的，哪里需要在哪引用。這無疑增加了許多代碼重復。
而在使用Vue.js的一些UI框架的時候則注意到，只需要在項目的入口文件中import這個插件然后在接著Vue.use(‘插件名')。這樣就能在整個項目里面使用這個框架中的組件以及方法了。
查閱資料后發(fā)現(xiàn)，自定義的組件需要提供一個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導出這個對象。
到此最關鍵的步驟已經(jīng)做好，接下來是最最關鍵的步驟。
我們需要在項目的入口文件中引入剛剛做好的組件，并且通過Vue.use(引入的組件)來使用插件。
到此，一個全局Vue組件就弄好了。我們在提供install方法的同時也可以通過Vue.$emit()的方法來觸發(fā)組件中的方法，但最近在使用Element UI時發(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é)點的消耗
}
}
})
</script>
一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節(jié)點，然后在獲取input1的值。
但是用ref綁定之后，我們就不需要在獲取dom節(jié)點了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。
然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點的消耗了
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
這篇文章主要介紹了如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3中watch和watchEffect實戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
Vue子級如何向父級傳遞數(shù)據(jù)(自定義事件)
這篇文章主要介紹了Vue子級如何向父級傳遞數(shù)據(jù)(自定義事件),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
解決Vue3使用Element-Plus導航刷新后active高亮消失的問題
這篇文章主要給大家介紹了如何解決Vue3使用Element-Plus導航刷新后active高亮消失的問題,文中有相關的代碼講解,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue 項目中實現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
Vue內(nèi)聯(lián)處理器中訪問方法和訪問事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時,可以通過內(nèi)聯(lián)事件處理器來直接在模板中編寫事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡單的操作,還可以調(diào)用組件中的方法,并訪問事件參數(shù),下面將詳細講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問事件參數(shù),需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue如何下載本地pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
安裝@vue/cli 報錯npm WARN deprecated request
這篇文章主要介紹了安裝@vue/cli 報錯npm WARN deprecated request@2.88.2問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了詳解Nuxt.js中使用Element-UI填坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了vue-router單頁面路由的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06