資訊專欄INFORMATION COLUMN
摘要：查閱資料后發(fā)現，自定義的組件需要提供一個方法提供可選的組件名像這樣引入自己編寫好的組件，然后創(chuàng)建一個對象，并包含一個方法，并使用方法注冊成全局組件，最后導出這個對象。
今天解決了一個長期困擾著我的問題，現在記錄一下，供日后參考。
涉及知識點是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ā)的。具體原因留到日后再做研究。
本文同步自我的博客
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/90250.html
摘要：當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合自定義指令除了默認設置的核心指令和也允許注冊自定義指令。 vue的復用性與組合 混合 混合 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。 當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合 ...
摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發(fā)送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。 上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...
摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發(fā)送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據功能模塊建立文件夾，放置本功能會用到的通用組件。 上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...
摘要：淺談中的組件一初識組件組件是最強大的功能之一。組件可以擴展元素，封裝可重用的代碼。例子我是組件我要把中的數據傳給我是組件中央事件總線我是用來接收從傳過來的數據我是中的數據我是根組件的數據 淺談 vue 中的組件 一 、初識組件 組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。 1、定義組件 Vue自定義組件分為兩種：全局...
閱讀 3253·2021-11-22 13:54
閱讀 925·2021-11-04 16:08
閱讀 5560·2021-10-11 11:09
閱讀 3690·2021-09-22 16:05
閱讀 1121·2019-08-30 15:54
閱讀 462·2019-08-30 15:44
閱讀 688·2019-08-30 14:05
閱讀 1116·2019-08-30 12:46
