组件化
什么是组件化?理解组件化
组件允许我们将 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 组件注册代码来配合不同来源的模板。