超緊繃!30天Vue.js學習日記　我還要更多！組件的相關補充

大家好,今天我們一樣會繼續介紹Vue.js中的組件,首先送上我在書上看到的語法糖作為補充:

<script>
//全局註冊
Vue.component(
‘my-component’, {
template : ‘<p>this is a component</p>’ 
})
//局部註冊
var Parent = Vue.extend({
template:’<div>\
		<p>this is a parent component</p>\
		<my-child><my-child>\
	   </div>’,
	Components: {
 ‘my-child’:{
template:’<p>this is a child component</p>’
} 
}
}); 
</script>

然後在Vue官網中提到的,局部註冊可以使用原生Javascript來定義組件:

<script>
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
</script>

在這30天內,我會介紹到透過vue-cli搭建webpack專案,因此接下來的部分
算是挺重要的,在這邊讀者可以先跳過這部分,等到相關文章產出後,再回頭查看也行。

Vue官網提到,當我們透過babel/webpack使用ES2015模組時,code會像是這樣:

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

• 在模組系統中局部註冊

在我們使用webpack模組系統時,會建議大家創建一個components資料夾,存放相關組件的檔案,不過如果我們是使用Vue-cli去做,它會直接幫我們搭好,至於Vue-cli以及webpack是什麼呢?我們會在後面的文章詳細介紹。

那如果我們想要在某個組件中使用我們先前做好的其他組件,我們可以使用import:

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

假設以上程式碼存於ComponentB.vue 文件中,那我們就可以在這使用
ComponentA以及ComponentC了!

• 基礎組件的自動化全局註冊

如果我們的許多組件都包裹了輸入框或是按鈕..等等的元素,我們有時會把它稱作基礎組件,他們會在各組件中頻繁使用。

因此會導致我們需要在每個組件中都使用import去引入這些基礎組件,像是這樣:

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

為了解決這個問題,我們可以在webpack專案中,使用require.context去對這些基礎組件做全局註冊,我在這邊一樣附上官網範例,以下代碼需寫在入口文件中(src/main.js):

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

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

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

  // 獲取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 獲取和目錄深度無關的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局註冊组件
  Vue.component(
    componentName,
    // 如果這個组件選項是透過 `export default` 導出的，
    // 那麼就會優先使用 `.default`，
    // 否則退回到使用模組的根。
    componentConfig.default || componentConfig
  )
})

在這邊提醒一下:全局註冊的行為需要在根實例創建前發生!!!

以上就是今天的教學,我們明天見!