Ⅰ. 组件及组件化

一、为什么需要组件？

1. 思考

以可折叠面板为例，现要展示3个，如何操作？

可折叠面板案例的代码：

<script setup>import{ref}from'vue'constvisible=ref(false)</script><template><h3>可折叠面板</h3><divclass="panel"><divclass="title"><h4>自由与爱情</h4><spanclass="btn"@click="visible = !visible">{{visible?'收起':'展开'}}</span></div><divclass="container"v-show="visible"><p>生命诚可贵，</p><p>爱情价更高。</p><p>若为自由故，</p><p>两者皆可抛。</p></div></div></template><style lang="scss">body{background-color:#ccc;}#app{width:400px;margin:20px auto;background-color:#fff;border:4px solid green;border-radius:1em;box-shadow:3px 3px 3pxrgba(0,0,0,0.5);padding:1em 2em 2em;}#app h3{text-align:center;}.panel{.title{display:flex;justify-content:space-between;align-items:center;border:1px solid #ccc;padding:01em;}.title h4{line-height:2;margin:0;}.container{border:1px solid #ccc;padding:01em;border-top-color:transparent;}.btn{cursor:pointer;}}</style>

2. 解决方案

1. 把需要复用的一段标签，抽离并封装到一个单独的vue文件里，连同相关JS和CSS放到一起
2. 哪里要用这个组件，哪里导入，当做标签使用即可

新建一个src/components/MyPanel.vue文件：

<script setup>import{ref}from'vue'constvisible=ref(false)</script><template><divclass="panel"><divclass="title"><h4>自由与爱情</h4><spanclass="btn"@click="visible = !visible">{{visible?'收起':'展开'}}</span></div><divclass="container"v-show="visible"><p>生命诚可贵，</p><p>爱情价更高。</p><p>若为自由故，</p><p>两者皆可抛。</p></div></div></template><style lang="scss"scoped>.panel{.title{display:flex;justify-content:space-between;align-items:center;border:1px solid #ccc;padding:01em;}.title h4{line-height:2;margin:0;}.container{border:1px solid #ccc;padding:01em;border-top-color:transparent;}.btn{cursor:pointer;}}</style>

然后在App.vue导入并使用该组件：

<script setup>// 导入importMyPanelfrom'./components/MyPanel.vue'</script><template><h3>可折叠面板</h3><!--使用--><MyPanel/><MyPanel/><MyPanel/></template><style>body{background-color:#ccc;}#app{width:400px;margin:20px auto;background-color:#fff;border:4px solid green;border-radius:1em;box-shadow:3px 3px 3pxrgba(0,0,0,0.5);padding:1em 2em 2em;}#app h3{text-align:center;}</style>

二、组件及组件化

1. 组件

组件是一个独立的、可复用的Vue实例，也是一段独立的 UI 视图，代码上体现在是一个独立的.vue文件，包含JS + HTML + CSS三部分组成。

类似乐高和积木一样，我们可以通过任意的乐高或积分进行组合，拼装成我们需要的成品。

2. 组件化

定义：一种代码的开发思想，体现在一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为；通过组件的组合与拼装形成一个完整的页面，本质是代码的一种拆分思想，化大为小、化繁为简、分而治之。

好处：各自独立、便于复用

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难以维护。我们可以按模块进行组件拆分

三、根组件App.vue

1. 根组件

根组件是整个应用最上层的组件，包裹所有普通小组件，如下图所示：

2. 组件是由三部分构成

• template：HTML 结构
• script：JS 逻辑
• style：CSS 样式（可支持less/scss，需要装包）

• 让组件支持less/scss
  • style标签，lang="less/scss"开启less/scss功能
  • 装包：npm i less less-loader -D或者npm i sass -D

四、组件的使用

组件的一系列场景命名规范如下所示：

1. 创建组件

新建.vue文件，编写组件的三部分代码

2. 导入组件

在需要的vue文件中的<script setup>中导入需要的组件即可！

注意：导入的组件对象名称，推荐保持和文件名一致。

import组件对象from'相对路径'// 例子：importMyPanelfrom'./components/MyPanel.vue'

3. 注册组件💥

💥注意：局部组件无需注册，全局组件要在main.js中注册。

之所以局部组件不需要注册，是因为vue3中<script setup>自动完成了局部注册，如果是vue2或者普通的<script>的话，则需要手动注册局部组件，如下面所示：

<script>importMyHeaderfrom'./components2/MyHeader.vue'// 如果是 vue2 或者普通的 <script> 的话，则需要手动注册局部组件exportdefault{components:{MyHeader}}</script><template><my-header></my-header></template>

4. 使用组件

把组件当做自定义标签使用：（单双标签均可）

<组件名></组件名><组件名/>// 例子：<!--大驼峰 双标签--><MyPanel></MyPanel><!--大驼峰 自闭合的单标签--><MyPanel/><!--烤串法（更推荐这种） 双标签--><my-panel></my-panel><!--烤串法 自闭合的单标签--><my-panel/>

5. 练习

components2/MyHeader.vue文件：

<script setup></script><template><divclass="my-header">我是my-header</div></template><style>.my-header{height:100px;line-height:100px;background-color:#8064a2;}</style>

components2/MyMain.vue文件：

<script setup></script><template><divclass="my-main">我是my-main</div></template><style>.my-main{height:400px;margin:20px0;line-height:400px;background-color:#f79646;}</style>

components2/MyFooter.vue文件：

<script setup></script><template><divclass="my-footer">我是my-footer</div></template><style>.my-footer{height:100px;line-height:100px;background-color:#4f81bd;}</style>

App.vue文件：

<template><my-header></my-header><my-main></my-main><my-footer></my-footer></template><script setup>importMyHeaderfrom'./components2/MyHeader.vue';importMyMainfrom'./components2/MyMain.vue';importMyFooterfrom'./components2/MyFooter.vue';</script><style>*{margin:0;}#app{height:100vh;padding:10px;background:skyblue;font-size:30px;color:#fff;text-align:center;}</style>

五、组件的全局注册

全局注册的组件，在项目的任何组件中都能使用

1. 步骤

1. 创建.vue组件（三个组成部分）
2. main.js中进行全局注册

2. 使用组件（与局部组件一样）

当成 HTML 标签直接使用：

• 双标签：<组件名></组件名>
• 自闭合的单标签：<组件名 />

3. 注意

组件名规范：大驼峰命名法（推荐）或烤串法，如MyHeader或my-header。

4. 语法

在main.js中通过导入组件，并且使用app.component()方法注册组件：

// main.js文件importMyPanelfrom'./components/MyPanel.vue'// 注册全局组件语法：// app.component('组件名', 组件对象)// 大驼峰组件名（更推荐这种，因为使用标签时候既可以用大驼峰，也可以用烤串法）app.component('MyPanel',MyPanel)// 烤串法组件名（需要注意：使用标签时候，只能用烤串法，而不能再用大驼峰了）app.component('my-panel',MyPanel)

注意，上面代码中的app对象，是createApp(App)得到的应用对象！

5. 练习

components3/MyButton.vue文件：

<script setup></script><template><buttonclass="my-button">通用按钮</button></template><style scoped>.my-button{height:50px;line-height:50px;padding:015px;background-color:#3bae56;border-radius:5px;font-size:16px;color:white;border:none;cursor:pointer;}</style>

在main.js中，导入并全局注册：

import{createApp}from'vue'importAppfrom'./App.vue'importMyButtonfrom'./components3/MyButton.vue'constapp=createApp(App)// 拿到应用对象app.component("MyButton",MyButton)app.mount('#app')// 最后再去挂载即可

components3/MyHeader.vue文件：

<script setup></script><template><divclass="my-header">我是my-header<my-button/></div></template><style>.my-header{height:100px;line-height:100px;background-color:#8064a2;}</style>

components3/MyMain.vue文件：

<script setup></script><template><divclass="my-main">我是my-main<my-button/></div></template><style>.my-main{height:400px;margin:20px0;line-height:400px;background-color:#f79646;}</style>

components3/MyFooter.vue文件：

<script setup></script><template><divclass="my-footer">我是my-footer<my-button/></div></template><style>.my-footer{height:100px;line-height:100px;background-color:#4f81bd;}</style>

App.vue文件：

<template><my-header></my-header><my-main></my-main><my-footer></my-footer></template><script setup>importMyHeaderfrom'./components3/MyHeader.vue';importMyMainfrom'./components3/MyMain.vue';importMyFooterfrom'./components3/MyFooter.vue';</script><style>*{margin:0;}#app{height:100vh;padding:10px;background:skyblue;font-size:30px;color:#fff;text-align:center;}</style>