詳解Vue註冊元件的方法

2022-08-20 14:00:42

簡介

說明

本文介紹Vue註冊元件的方法。

Vue註冊元件有這幾種：全域性註冊、區域性註冊、在模組系統中註冊。

官網網址

https://v2.cn.vuejs.org/v2/guide/components-registration.html

元件名字

註冊一個元件的時候，需要給它一個名字。比如在全域性註冊：

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

元件名是 Vue.component 的第一個引數。

當直接在 DOM 中使用一個元件 (而不是在字串模板或單檔案元件) 的時候，強烈推薦遵循 W3C 規範中的自定義元件名 (字母全小寫且必須包含一個連字元)。這會幫助你避免和其他HTML 元素相沖突。

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

使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
當使用 kebab-case (短橫線分隔命名) 定義一個元件時，你也必須在參照這個自定義元素時使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
當使用 PascalCase (首字母大寫命名) 定義一個元件時，你在參照這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，儘管如此，直接在 DOM (即非字串的模板) 中使用時只有 kebab-case 是有效的。

全域性註冊（一般用於框架）

寫法

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

或者

Vue.component("tmp2", Vue.extend({
        template: "<p>通過 Vue.extend 建立的 tmp2 元件</p>"
    }));

上邊第1種寫法（沒有Vue.extend）：Vue預設自動呼叫Vue.extend()。

範例

Vue.component("counter",
  {
	data(){
			return {count:0}
		},
 
	template: '<button v-on:click="count++">點選計算點選次數：{{count}}次</button>'
  }
)

這些元件是全域性註冊的。也就是說它們在註冊之後可以用在任何新建立的 Vue 根範例 (new Vue) 的模板中。

很多Vue的前端框架都是全域性註冊元件的，例如vue-element-admin：

src/index.js：

import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
// 其他程式碼
 
const components = [
  Pagination,
  Dialog,
  // 其他程式碼
];
 
const install = function(Vue, opts = {}) {
  // 其他程式碼
 
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}

區域性註冊（不常用）

說明

有些場景不適合使用全域性註冊。比如，使用一個像 webpack 這樣的構建系統，全域性註冊所有的元件意味著即便你已經不再使用一個元件了，它仍然會被包含在你最終的構建結果中。這造成了使用者下載的 JavaScript 的無謂的增加。

在這些情況下，可以通過一個普通的 JavaScript 物件來定義元件：

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

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

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

對於 components 物件中的每個 property 來說，其 property 名就是自定義元素的名字，其 property 值就是這個元件的選項物件。

區域性註冊的元件在其子元件中不可用

例如，如果你希望 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 的縮寫，即這個變數名同時是：

用在模板中的自定義元素的名稱
包含了這個元件選項的變數名

模組系統

在模組系統中區域性註冊（常用）

專案中我們一般使用Babel 或 webpack 的模組系統。這時，我們一般建立一個 components 目錄，並將每個元件放置在其各自的檔案中。

然後在區域性註冊之前匯入每個你想使用的元件。例如，在一個假設的 ComponentB.js 或 ComponentB.vue 檔案中：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
 
export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

現在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。

範例：Vue--props--使用/教學/範例

基礎元件的自動化全域性註冊

通用元件一般只包裹了一個輸入框或按鈕之類的元素，可以把它們稱為基礎元件。各個元件都會用到這些通用元件。

這樣會導致元件裡都會有一個包含基礎元件的長列表：

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
 
export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

但這個基礎元件只是用於模板中的一小部分：

<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

如果你使用了 webpack (或在內部使用了 webpack 的 Vue CLI 3+)，那麼就可以使用 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
  )
})

全域性註冊的行為必須在根 Vue 範例 (通過 new Vue) 建立之前發生。

到此這篇關於Vue註冊元件的方法的文章就介紹到這了,更多相關Vue註冊元件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！