组件化
什么是组件化？理解组件化
组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：
这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。
如何封装一个vue组件
目标：理解一般思路即可
一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。
- 先构建组件的模板
- 定义组件
- 注册组件
- 使用组件
vue3组件注册和使用
学习：app.component()、components选项、template选项
组件注册有两种方式：全局注册和局部注册。
全局注册组件
我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用
import { createApp } from 'vue' const app = createApp({}) app.component( // 注册的名字 'MyComponent', // 组件的实现 { /* ... */ } )
app.component() 方法可以被链式调用：
app .component('ComponentA', ComponentA) .component('ComponentB', ComponentB) .component('ComponentC', ComponentC)
全局注册的组件可以在此应用的任意组件的模板中使用
<!-- 这在当前应用的任意组件中都可用 --> <ComponentA/> <ComponentB/> <ComponentC/>
所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在彼此内部使用
完整案例：05_component/01_com.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件</title> </head> <body> <div id="app"> <!-- 4.使用组件 html 页面中，只能使用 短横线方式 --> <my-root></my-root> <!-- <MyRoot></MyRoot> --> </div> </body> <!-- 1.定义组件模版 --> <template id="root"> <div style="width: 100%;height: 600px; background-color: #ccc;"></div> </template> <script src="../lib/vue.global.js"></script> <script> // 2.定义组件 const Root = { template: '#root' } const app = Vue.createApp({ }) // 3.注册组件 // 组件名字 两种方式 驼峰式 MyRoot 短横线连接 my-root app.component('MyRoot', Root) app.mount('#app') </script> </html>
以上案例使用 PascalCase 作为组件名的注册格式，这是因为：
- 1、PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。
- 2、
<PascalCase />在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来
在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 模板（html文件）中是不可用的
为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 <MyComponent> 或 <my-component> 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。
