组件化：将一个页面拆分成一个个小的功能模块，每个功能模块完成自己部分的独立的功能。任何应用都可以被抽象成一棵组件树。
Vue 中的根组件：
Vue.createApp() 中传入对象的本质上就是一个组件，称之为根组件（APP 组件）。
<div id="app">
<div>{{message}}</div>
</div>
<script>
// 组件
const APP = {
data() {
return {
message: 'Hello Vue',
}
},
}
// Vue.createApp() 中传入对象的本质上就是一个组件，称之为根组件（APP 组件）
const app = Vue.createApp(APP)
app.mount('#app')
</script>
注册组件：
每个组件都可以拥有自己的模板、样式、代码逻辑。注册组件分为两种：
- 全局组件：在任何其他的组件中都可以使用的组件。
- 局部组件：只有在注册的组件中才能使用的组件。
只要注册了全局组件，即使代码中没有用到，Webpack 等打包工具依然会对其进行打包；局部组件如果没有用到，将不会对其进行打包。
注册全局组件：
全局组件需要使用全局创建的 app 来注册，通过 app.component() 方法传入组件名称、组件对象即可注册一个全局组件。
<div id="app">
<!-- 使用全局组件 -->
<product-item></product-item>
</div>
<script>
const app = Vue.createApp()
// 创建组件对象
const productItem = {
template: '<div>我是一个组件</div>'
}
// 注册全局组件
app.component('product-item', productItem)
app.mount('#app')
</script>
组件的 template 模板还有另外一种写法。
<!-- 编写组件模板 -->
<template id="product-item-template">
<div>我是一个组件</div>
</template>
<div id="app">
<product-item></product-item>
</div>
<script>
const app = Vue.createApp()
const productItem = {
// 使用组件模板
template: '#product-item-template'
}
app.component('product-item', productItem)
app.mount('#app')
</script>
注册局部组件：
局部组件通过 components 属性选项来进行注册，该选项对应的是一个对象，对象中的键值对是 组件名称：组件对象。
<div id="app">
<!-- 使用局部组件 -->
<product-item></product-item>
</div>
<script>
// 创建组件对象
const productItem = {
template: '<div>我是一个组件</div>'
}
const app = Vue.createApp({
// 注册局部组件
components: {
'product-item': productItem,
}
})
app.mount('#app')
</script>
组件的 template 模板还有另外一种写法。
<!-- 编写组件模板 -->
<template id="product-item-template">
<div>我是一个组件</div>
</template>
<div id="app">
<product-item></product-item>
</div>
<script>
const app = Vue.createApp({
components: {
'product-item': {
// 注册组件模板
template: '#product-item-template',
}
}
})
app.mount('#app')
</script>
定义组件名称的方式：
定义组件名称的方式有两种：
- 使用
kebab-case短横线分隔符。// 使用 <product-item></product-item> // 定义 app.component('product-item', productItem) - 使用
PascalCase大驼峰标识符。// 使用。在原生 HTML 文件中这么写是无效的，因为 HTML 不区分大小写；不过在 Vue 文件中就没有这个问题了 <productItem></productItem> // 定义 app.component('productItem', productItem)
