《Vue3 四》Vue 的组件化

组件化：将一个页面拆分成一个个小的功能模块，每个功能模块完成自己部分的独立的功能。任何应用都可以被抽象成一棵组件树。

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>

注册组件：

每个组件都可以拥有自己的模板、样式、代码逻辑。注册组件分为两种：

1. 全局组件：在任何其他的组件中都可以使用的组件。
2. 局部组件：只有在注册的组件中才能使用的组件。

注册全局组件：

全局组件需要使用全局创建的 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>