亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

 更新時(shí)間：2020年12月25日 10:22:33   作者：紫藤蘿yu  
這篇文章主要介紹了vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊(cè)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

參考官網(wǎng)：https://cn.vuejs.org/v2/guide/components-registration.html

在日常開發(fā)中，有一些組件是比較常用，但是為了避免在開發(fā)過程中不停地引入，或者在main.js中注冊(cè)，，或者每添加一個(gè)組件就需要手動(dòng)注冊(cè)一次。則直接進(jìn)行自動(dòng)化全局注冊(cè)。

自動(dòng)化全局注冊(cè)，官網(wǎng)上都詳細(xì)的說明，以下是自己官網(wǎng)的說明基礎(chǔ)上進(jìn)行了一個(gè)demo開發(fā)實(shí)例：

1、自定義文件夾：

在src下新建一個(gè)components文件夾，用于存放組件。并新建一個(gè)用于存放需要自動(dòng)化全局注冊(cè)的組件，例如base。

2、在base文件夾下定義index.js，具體代碼如下示：

// 基礎(chǔ)組件的自動(dòng)化全局注冊(cè)
import Vue from 'vue'
const requireComponent = require.context(
    // 其組件目錄的相對(duì)路徑
    './',
    // 是否查詢其子目錄
    true,
    // 匹配基礎(chǔ)組件文件名的正則表達(dá)式
    /\.vue$/
  )
  requireComponent.keys().forEach(fileName => {
    // 獲取組件配置
    const componentConfig = requireComponent(fileName)
    // 全局注冊(cè)組件
    Vue.component(
        componentConfig.default.name,   // 此處的name,是組件屬性定義的name
        // 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的，
        // 那么就會(huì)優(yōu)先使用 `.default`，
        // 否則回退到使用模塊的根。
        componentConfig.default
    )
  })

以上代碼需要解釋的地方：

　　1、匹配基礎(chǔ)組件文件名的正則表達(dá)式，此處需要根據(jù)實(shí)際的組件名稱和規(guī)則進(jìn)行配置；

　　2、componentConfig.default.name此處用到的，是表示組件的名稱，并不是固定的寫法?？梢杂貌煌膶懛▉肀硎窘M件名稱，例如可以直接解析fileName得出文件夾的名稱作為組件名稱也是可以的。componentConfig.default.name中的name，來自于組件定義的時(shí)候頁面的name。若頁面沒有定義name，則報(bào)錯(cuò)。

3、在main.js中引入index.js文件

由于全局注冊(cè)的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生。

// 基礎(chǔ)組件的自動(dòng)化全局注冊(cè)。全局注冊(cè)的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生
import './components/base/index'

4、直接在需要的地方使用該組件即可

頁面效果如下示：

以上就是vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊(cè)的詳細(xì)內(nèi)容，更多關(guān)于vue 組件全局注冊(cè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論