文章目录Ⅰ. 组件及组件化一、为什么需要组件1. 思考2. 解决方案二、组件及组件化1. 组件2. 组件化三、根组件 App.vue1. 根组件2. 组件是由三部分构成四、组件的使用1. 创建组件2. 导入组件3. 注册组件4. 使用组件5. 练习五、组件的全局注册1. 步骤2. 使用组件与局部组件一样3. 注意4. 语法5. 练习Ⅰ. 组件及组件化一、为什么需要组件1. 思考以可折叠面板为例现要展示3个如何操作可折叠面板案例的代码script setupimport{ref}fromvueconstvisibleref(false)/scripttemplateh3可折叠面板/h3divclasspaneldivclasstitleh4自由与爱情/h4spanclassbtnclickvisible !visible{{visible?收起:展开}}/span/divdivclasscontainerv-showvisiblep生命诚可贵/pp爱情价更高。/pp若为自由故/pp两者皆可抛。/p/div/div/templatestyle langscssbody{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;}}/style2. 解决方案把需要复用的一段标签抽离并封装到一个单独的vue文件里连同相关JS和CSS放到一起哪里要用这个组件哪里导入当做标签使用即可新建一个src/components/MyPanel.vue文件script setupimport{ref}fromvueconstvisibleref(false)/scripttemplatedivclasspaneldivclasstitleh4自由与爱情/h4spanclassbtnclickvisible !visible{{visible?收起:展开}}/span/divdivclasscontainerv-showvisiblep生命诚可贵/pp爱情价更高。/pp若为自由故/pp两者皆可抛。/p/div/div/templatestyle langscssscoped.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/scripttemplateh3可折叠面板/h3!--使用--MyPanel/MyPanel/MyPanel//templatestylebody{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.vue1. 根组件根组件是整个应用最上层的组件包裹所有普通小组件如下图所示2. 组件是由三部分构成templateHTML 结构scriptJS 逻辑styleCSS 样式可支持less/scss需要装包让组件支持less/scssstyle标签langless/scss开启less/scss功能装包npm i less less-loader -D或者npm i sass -D四、组件的使用组件的一系列场景命名规范如下所示场景✅推荐写法可选写法说明文件名MyHeader.vuemy-header.vue官方推荐 PascalCase和类名一样清晰import 引入import MyHeader from ‘./MyHeader.vue’import Haha from ‘./MyHeader.vue’变量名随意但最好和文件名一致便于阅读局部注册components: { MyHeader }components: { Haha }名字和模板里的标签要对应模板 (SFC 内部)Vue 自动识别两种形式HTML 文件直接写 (非 .vue)❌ 不支持HTML 标签不区分大小写必须用短横线1. 创建组件新建.vue文件编写组件的三部分代码2. 导入组件在需要的vue文件中的script setup中导入需要的组件即可注意导入的组件对象名称推荐保持和文件名一致。import组件对象from相对路径// 例子importMyPanelfrom./components/MyPanel.vue3. 注册组件注意局部组件无需注册全局组件要在main.js中注册。之所以局部组件不需要注册是因为vue3中script setup自动完成了局部注册如果是vue2或者普通的script的话则需要手动注册局部组件如下面所示scriptimportMyHeaderfrom./components2/MyHeader.vue// 如果是 vue2 或者普通的 script 的话则需要手动注册局部组件exportdefault{components:{MyHeader}}/scripttemplatemy-header/my-header/template4. 使用组件把组件当做自定义标签使用单双标签均可组件名/组件名组件名/// 例子!--大驼峰 双标签--MyPanel/MyPanel!--大驼峰 自闭合的单标签--MyPanel/!--烤串法更推荐这种 双标签--my-panel/my-panel!--烤串法 自闭合的单标签--my-panel/5. 练习components2/MyHeader.vue文件script setup/scripttemplatedivclassmy-header我是my-header/div/templatestyle.my-header{height:100px;line-height:100px;background-color:#8064a2;}/stylecomponents2/MyMain.vue文件script setup/scripttemplatedivclassmy-main我是my-main/div/templatestyle.my-main{height:400px;margin:20px0;line-height:400px;background-color:#f79646;}/stylecomponents2/MyFooter.vue文件script setup/scripttemplatedivclassmy-footer我是my-footer/div/templatestyle.my-footer{height:100px;line-height:100px;background-color:#4f81bd;}/styleApp.vue文件templatemy-header/my-headermy-main/my-mainmy-footer/my-footer/templatescript setupimportMyHeaderfrom./components2/MyHeader.vue;importMyMainfrom./components2/MyMain.vue;importMyFooterfrom./components2/MyFooter.vue;/scriptstyle*{margin:0;}#app{height:100vh;padding:10px;background:skyblue;font-size:30px;color:#fff;text-align:center;}/style五、组件的全局注册全局注册的组件在项目的任何组件中都能使用1. 步骤创建.vue组件三个组成部分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/scripttemplatebuttonclassmy-button通用按钮/button/templatestyle 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}fromvueimportAppfrom./App.vueimportMyButtonfrom./components3/MyButton.vueconstappcreateApp(App)// 拿到应用对象app.component(MyButton,MyButton)app.mount(#app)// 最后再去挂载即可components3/MyHeader.vue文件script setup/scripttemplatedivclassmy-header我是my-headermy-button//div/templatestyle.my-header{height:100px;line-height:100px;background-color:#8064a2;}/stylecomponents3/MyMain.vue文件script setup/scripttemplatedivclassmy-main我是my-mainmy-button//div/templatestyle.my-main{height:400px;margin:20px0;line-height:400px;background-color:#f79646;}/stylecomponents3/MyFooter.vue文件script setup/scripttemplatedivclassmy-footer我是my-footermy-button//div/templatestyle.my-footer{height:100px;line-height:100px;background-color:#4f81bd;}/styleApp.vue文件templatemy-header/my-headermy-main/my-mainmy-footer/my-footer/templatescript setupimportMyHeaderfrom./components3/MyHeader.vue;importMyMainfrom./components3/MyMain.vue;importMyFooterfrom./components3/MyFooter.vue;/scriptstyle*{margin:0;}#app{height:100vh;padding:10px;background:skyblue;font-size:30px;color:#fff;text-align:center;}/style