vue -- 注冊組件

一、全局組件

1、組件名稱

命名的時候：串聯或者駝峰

component-name
componentName

使用的時候必須全部小寫串聯

<component-name></component-name>

注冊方式
全局注冊的組件一定要寫在vue實例之前，否則沒有效果，全局組件可以在所有組件中使用

Vue.component('componentName',{
    // options，這里其實相當於一個extends對象
})

二、局部組件

1、子組件

有點類似創建一個extends拓展，子組件只能在注冊的組件里面使用

let componentName = { /* options */ }

// 聲明的子組件必須在vue實例中注冊了才能使用
let app = new Vue({
    components: {
        'div': componentName
    }
})

2、公共組件

其實每一個vue文件都可以看作是一個組件，我們可以引入這個vue文件，在想要展示頁面展示出來

import ComponentName from '../components/mycomponent.vue'

// 注冊組件
let app = new Vue({
    components: {
        'div':  ComponentName
    }
})

// 在vue-cli里面經常這么寫
export default {
    components: {
        ComponentName   => // 這個是es6的寫法好像，如果key和value是一樣的，則可以直接寫value，不用再寫key
    }
}

三、自動化全局注冊基本組件

通過require.context來全局注冊這些常用基礎組件

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // components 文件夾的相對路徑
  './components',
  // 是否查找子文件夾
  false,
  // 用於匹配組件文件名的正則表達式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName)

  // 取得組件的 Pascal 式命名
  const componentName = upperFirst(
    camelCase(
      // 將文件名前面的 `./` 和擴展名剝離
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 以全局方式注冊組件
  Vue.component(
    componentName,
    // 如果組件是通過 `export default` 導出，
    // 則在 `.default` 中，查找組件選項，
    // 否則回退至模塊根對象中，查找組件選項
    componentConfig.default || componentConfig
  )
})