簡(jiǎn)介

說明

本文介紹Vue注冊(cè)組件的方法。

Vue注冊(cè)組件有這幾種：全局注冊(cè)、局部注冊(cè)、在模塊系統(tǒng)中注冊(cè)。

官網(wǎng)網(wǎng)址

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

組件名字

注冊(cè)一個(gè)組件的時(shí)候，需要給它一個(gè)名字。比如在全局注冊(cè)：

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

組件名是 Vue.component 的第一個(gè)參數(shù)。

當(dāng)直接在 DOM 中使用一個(gè)組件 (而不是在字符串模板或單文件組件) 的時(shí)候，強(qiáng)烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫且必須包含一個(gè)連字符)。這會(huì)幫助你避免和其他HTML 元素相沖突。

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

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

全局注冊(cè)（一般用于框架）

寫法

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

或者

Vue.component("tmp2", Vue.extend({
        template: "<p>通過 Vue.extend 創(chuàng)建的 tmp2 組件</p>"
    }));

上邊第1種寫法（沒有Vue.extend）：Vue默認(rèn)自動(dòng)調(diào)用Vue.extend()。

示例

Vue.component("counter",
  {
	data(){
			return {count:0}
		},
 
	template: '<button v-on:click="count++">點(diǎn)擊計(jì)算點(diǎn)擊次數(shù)：{{count}}次</button>'
  }
)

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

很多Vue的前端框架都是全局注冊(cè)組件的，例如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);
  });
}

局部注冊(cè)（不常用）

說明

有些場(chǎng)景不適合使用全局注冊(cè)。比如，使用一個(gè)像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊(cè)所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。

在這些情況下，可以通過一個(gè)普通的 JavaScript 對(duì)象來定義組件：

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

然后在 components 選項(xiàng)中定義你想要使用的組件：

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

對(duì)于 components 對(duì)象中的每個(gè) property 來說，其 property 名就是自定義元素的名字，其 property 值就是這個(gè)組件的選項(xiàng)對(duì)象。

局部注冊(cè)的組件在其子組件中不可用

例如，如果你希望 ComponentA 在 ComponentB 中可用，則你需要這樣寫：

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

或者如果你通過 Babel 和 webpack 使用 ES2015 模塊，代碼這樣寫：

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

注意

在 ES2015+ 中，在對(duì)象中放一個(gè)類似 ComponentA 的變量名其實(shí)是 ComponentA: ComponentA 的縮寫，即這個(gè)變量名同時(shí)是：

• 用在模板中的自定義元素的名稱
• 包含了這個(gè)組件選項(xiàng)的變量名

模塊系統(tǒng)

在模塊系統(tǒng)中局部注冊(cè)（常用）

項(xiàng)目中我們一般使用Babel 或 webpack 的模塊系統(tǒng)。這時(shí)，我們一般創(chuàng)建一個(gè) components 目錄，并將每個(gè)組件放置在其各自的文件中。

然后在局部注冊(cè)之前導(dǎo)入每個(gè)你想使用的組件。例如，在一個(gè)假設(shè)的 ComponentB.js 或 ComponentB.vue 文件中：

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

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

實(shí)例：Vue--props--使用/教程/實(shí)例

基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

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

這樣會(huì)導(dǎo)致組件里都會(huì)有一個(gè)包含基礎(chǔ)組件的長(zhǎng)列表：

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

但這個(gè)基礎(chǔ)組件只是用于模板中的一小部分：

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

如果你使用了 webpack (或在內(nèi)部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注冊(cè)這些非常通用的基礎(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(
  // 其組件目錄的相對(duì)路徑
  './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+$/, '')
    )
  )
 
  // 全局注冊(cè)組件
  Vue.component(
    componentName,
    // 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的，
    // 那么就會(huì)優(yōu)先使用 `.default`，
    // 否則回退到使用模塊的根。
    componentConfig.default || componentConfig
  )
})

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

到此這篇關(guān)于Vue注冊(cè)組件的方法的文章就介紹到這了,更多相關(guān)Vue注冊(cè)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論