此章节假设你已经看过了组件基础。若你还不了解组件是什么,请先阅读该章节。
一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:
全局注册
我们可以使用 Vue 应用实例 的 app.component() 方法,让组件在当前 Vue 应用中全局可用。
import { createApp } from 'vue'
const app = createApp({})
app.component(
// 注册的名字
'MyComponent',
// 组件的实现
{
/* ... */
}
)
如果使用单文件组件,你可以注册被导入的 .vue 文件:
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)
app.component()
方法可以被链式调用:
app
.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)
全局注册的组件可以在此应用的任意组件的模板中使用:
<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>
所有的子组件也可以使用全局注册的组件,这意味着这三个组件也都可以在彼此内部使用(组件递归)。
模板预编译问题
问题分析
import { createApp, defineComponent, ref } from 'vue'
import './style.css'
import A from './A.vue'
const app = createApp(A)
app.component(
'MyComp',
defineComponent({
setup() {
const counter = ref(0)
const increase = () => {
counter.value++
}
return { counter, increase }
},
template: `
<div>
<p>Counter: {{ counter }}</p>
<button @click="increase">Increase</button>
</div>
`
})
)
app.mount('#app')
<template>
<MyComp />
</template>
此时页面中什么都不会显示,并且会在调试工具中提示我们 template 无法编译:
解决方案1 手写 render 函数 不推荐
import { createApp, defineComponent, h, ref } from 'vue'
import './style.css'
import A from './A.vue'
const app = createApp(A)
app.component(
'MyComp',
defineComponent({
setup() {
const counter = ref(0)
const increase = () => {
counter.value++
}
return { counter, increase }
},
render() {
return h('div', {}, [
h('p', `Counter: ${this.counter}`),
h('button', { onClick: this.increase }, 'Increase')
])
}
})
)
app.mount('#app')
解决方案1:手写 render 函数,不使用 template 模板。
这种做法相当于直接手写模板初步编译的产物 render 函数,这么做相当于直接无视 vue 提供的模板编译预编译步骤,但是这种做法并不推荐。
解决方案2 单文件组件 推荐
虽然方案1确实可行,不过手写 render 函数看起来并不比直接写 template 来的直观,所以更推荐的做法是将 MyComp 组件的内容封装到一个 .vue 文件(单文件组件)中。
import { createApp } from 'vue'
import './style.css'
import A from './A.vue'
import MyComp from './MyComp.vue' // 引入 MyComp.vue 文件
const app = createApp(A)
app.component('MyComp', MyComp) // 注册 MyComp 组件
app.mount('#app')
<template>
<div>
<p>Counter: {{ counter }}</p>
<button @click="increase">Increase</button>
</div>
</template>
<script setup>
import {ref} from "vue"
const counter = ref(0)
const increase = () => {
counter.value++
}
</script>
局部注册
全局注册的问题
全局注册虽然很方便,但有以下几个问题:
- 全局注册,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中。
- 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。
局部注册的优势
相比之下,局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是:
- 对 tree-shaking 更加友好
- 使组件之间的依赖关系更加明确
<template>
<h1>B.vue</h1>
</template>
在使用 <script setup>
的单文件组件中,导入的组件可以直接在模板中使用,无需注册:
<script setup>
import B from "./B.vue"
</script>
<template>
<B />
</template>
如果没有使用 <script setup>
,则需要使用 components 选项来显式注册:
<script>
import B from "./B.vue"
export default {
components: {
B,
}
}
</script>
<template>
<B />
</template>
对于每个 components 对象里的属性,它们的 key 名就是注册的组件名,而值就是相应组件的实现。上面的例子中使用的是 ES2015 的缩写语法,等价于:
export default {
components: {
B: B,
// B
}
}
请注意:局部注册的组件在后代组件中并不可用。在这个例子中,B 注册后仅在当前组件 A 中可用,而在任何的子组件或更深层的子组件中都不可用。
组件名格式
大驼峰
在整个指引中,我们都使用 PascalCase 作为组件名的注册格式,这是因为:
- PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易,同时 IDE 也能提供较好的自动补全。
**<PascalCase />**
在模板中更明显地表明了这是一个 Vue 组件,而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。
在单文件组件和内联字符串模板中,我们都推荐这样做。但是,PascalCase 的标签名在 DOM 模板中是不可用的,详情参见 DOM 模板解析注意事项。
为了方便,Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件,在模板中可以通过
<template>
<h1>BComp.vue</h1>
</template>
<script>
import BComp from "./BComp.vue"
export default {
components: {
BComp,
}
}
</script>
<template>
<BComp />
<b-Comp />
<b-comp />
<B-comp />
</template>
组件名推荐写法
在 vue 中,上述这些写法都是可以识别的,不过按照官方文档,推荐使用下面这两种写法:
PascalCase
对应上述写法:<BComp />
kebab-case
对应上述写法:<b-comp />