組件名
在註冊一個組件的時候,我們始終需要給它一個名字。
Vue.component('my-component-name', { /* ... */ })
該組件名就是 Vue.component
的第一個參數。
組件名大小寫
1、使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
當使用 kebab-case (短橫線分隔命名) 定義一個組件時,你也必須在引用這個自定義元素時使用 kebab-case,例如 <my-component-name>
。
2、使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
當使用 PascalCase (首字母大寫命名) 定義一個組件時,在引用這個自定義元素時兩種命名法都可以使用。
注意,儘管如此,直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。
全局註冊
Vue.component('my-component-name', {
// ... 選項 ...
})
這些組件是全局註冊的。也就是說它們在註冊之後可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中。比如:
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
局部註冊
如果使用一個像 webpack 這樣的構建系統,全局註冊所有的組件意味着即便你已經不再使用一個組件了,它仍然會被包含在你最終的構建結果中。這造成了用戶下載的 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
},
// ...
}
模塊系統
1、在模塊系統中局部註冊
在局部註冊之前導入每個要使用的組件。
例如,在一個假設的 ComponentB.js
或 ComponentB.vue
文件中。
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
現在 ComponentA
和 ComponentC
都可以在 ComponentB
的模板中使用了。
2、基礎組件的自動化全局註冊
許多組件只是包裹了一個輸入框或按鈕之類的元素,是相對通用的。我們有時候會把它們稱爲基礎組件,它們會在各個組件中被頻繁的用到。
所以會導致很多組件裏都會有一個包含基礎組件的長列表:
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>