vue2.0學(xué)習(xí)筆記（組件注冊）

silvertheo 發(fā)布于2019-08-23 18:36 / 1517人閱讀

摘要：組件名在注冊一個組件的時候，我們始終需要給它一個名字。局部注冊全局注冊往往是不夠理想的。基礎(chǔ)組件的自動化全局注冊可能你的許多組件只是包裹了一個輸入框或按鈕之類的元素，是相對通用的。記住全局注冊的行為必須在根實例通過創(chuàng)建之前發(fā)生。

1、組件名

在注冊一個組件的時候，我們始終需要給它一個名字。

Vue.component("my-component-name", { /* ... */ })

該組件名就是 Vue.component 的第一個參數(shù)。
當(dāng)直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候，強(qiáng)烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和當(dāng)前以及未來的 HTML 元素相沖突。

1.1組件名大小寫

定義組件名的方式有兩種：

（1）使用 kebab-case(短橫線分隔命名)

Vue.component("my-component-name", { /* ... */ })

當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如。

（2）使用 PascalCase (首字母大寫命名)

Vue.component("MyComponentName", { /* ... */ })

當(dāng)使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說和都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。

2、全局注冊

到目前為止，我們只用過 Vue.component 來創(chuàng)建組件：

Vue.component("my-component-name", {
  // ... 選項 ...
})

這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創(chuàng)建的 Vue 根實例 (new Vue) 的模板中。比如：

Vue.component("component-a", { /* ... */ })
Vue.component("component-b", { /* ... */ })
Vue.component("component-c", { /* ... */ })

new Vue({ el: "#app" })

在所有子組件中也是如此，也就是說這三個組件在各自內(nèi)部也都可以相互使用。

3、局部注冊

全局注冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。
在這些情況下，可以通過一個普通的 JavaScript 對象來定義組件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 選項中定義你想要使用的組件：

new Vue({
  el: "#app",
  components: {
    "component-a": ComponentA,
    "component-b": ComponentB
  }
})

對于 components 對象中的每個屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個組件的選項對象。注意局部注冊的組件在其子組件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，則需要這樣寫：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    "component-a": ComponentA
  },
  // ...
}

或者如果你通過 Babel 和 webpack 使用 ES2015 模塊，那么代碼看起來更像：

import ComponentA from "./ComponentA.vue"
export default {
  components: {
    ComponentA
  },
  // ...
}

注意在 ES2015+ 中，在對象中放一個類似 ComponentA 的變量名其實是 ComponentA: ComponentA 的縮寫，即這個變量名同時是：
用在模板中的自定義元素的名稱; 包含了這個組件選項的變量名

4、模塊系統(tǒng) 4.1在模塊系統(tǒng)中局部注冊

在這些情況下，我們推薦創(chuàng)建一個 components 目錄，并將每個組件放置在其各自的文件中。
然后你需要在局部注冊之前導(dǎo)入每個你想使用的組件。例如，在一個假設(shè)的 ComponentB.js 或

ComponentB.vue 文件中：
import ComponentA from "./ComponentA"
import ComponentC from "./ComponentC"

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

現(xiàn)在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。

4.2基礎(chǔ)組件的自動化全局注冊

可能你的許多組件只是包裹了一個輸入框或按鈕之類的元素，是相對通用的。我們有時候會把它們稱為基礎(chǔ)組件，它們會在各個組件中被頻繁的用到。
所以會導(dǎo)致很多組件里都會有一個包含基礎(chǔ)組件的長列表：

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

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

而只是用于模板中的一小部分：

幸好如果你使用了 webpack (或在內(nèi)部使用了 webpack 的 Vue CLI 3+)，那么就可以使用require.context 只全局注冊這些非常通用的基礎(chǔ)組件。這里有一份可以讓你在應(yīng)用入口文件 (比如 src/main.js) 中全局導(dǎo)入基礎(chǔ)組件的示例代碼：

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

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

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

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

  // 全局注冊組件
  Vue.component(
    componentName,
    // 如果這個組件選項是通過 `export default` 導(dǎo)出的，
    // 那么就會優(yōu)先使用 `.default`，
    // 否則回退到使用模塊的根。
    componentConfig.default || componentConfig
  )
})

記住全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生。