Vue组件化

❓ 为什么需要组件?

场景 :你要展示3个可折叠面板,直接复制3份代码?
结局 :改一个Bug,改三次!💥
解决方案 :召唤组件------代码界的"乐高积木"!

举个🌰:可折叠面板的逆袭

原始代码

复制代码
<!-- App.vue中硬编码3次面板 -->
<template>
  <h3>可折叠面板</h3>
  <div class="panel">...</div>
  <div class="panel">...</div>
  <div class="panel">...</div>
</template>

问题:代码臃肿、维护地狱!

组件化后

复制代码
<!-- MyPanel.vue封装组件 -->
<template>
  <div class="panel">...</div>
</template>

<!-- App.vue优雅复用 -->
<template>
  <h3>可折叠面板</h3>
  <MyPanel />
  <MyPanel />
  <MyPanel />
</template>

效果:改一次,全生效!🎉

总结

组件 = 独立代码块 (HTML+CSS+JS三合一)

复用场景:重复UI复杂功能模块


🎯 组件化:化繁为简的代码哲学

1. 组件是什么?
  • 定义 :一个.vue文件,自带HTML、CSS、JS的"代码乐高"

  • 特点

    • 独立:自己玩自己的,不干扰别人

    • 复用:哪里需要,搬哪里!

2. 组件化的灵魂
  • 思想 :把页面拆成小积木,再拼装成完整城堡🏰

  • 好处

    • 维护简单:改Bug像找乐高块一样快

    • 团队协作:你拼城墙,我搭炮塔,互不干扰


🌳 根组件:App.vue的帝王地位

定位 :整个应用的顶层Boss ,包裹所有小弟(子组件)
构成

复制代码
<template>  <!-- 骨架 --> </template>
<script>    <!-- 灵魂 --> </script>
<style>     <!-- 皮肤 --> </style>

彩蛋 :想用Less/Sass?加个lang="less",再npm i less


🔧 组件的使用四部曲

1. 创建组件

新建BitHeader.vue,填充三件套:

复制代码
<template>
  <div class="bit-header">我是Header</div>
</template>
<script setup></script>
<style scoped>
  .bit-header { background: #8064a2; }
</style>
2. 导入组件

在父组件中召唤它:

复制代码
<script setup>
import BitHeader from './components/BitHeader.vue'
</script>
3. 使用组件

像用HTML标签一样丝滑:

复制代码
<template>
  <BitHeader />  <!-- 大驼峰式 -->
  <bit-header></bit-header>  <!-- 烤串式 -->
</template>
4. 全局注册(VIP通行证)

main.js中注册,全项目通用:

复制代码
import BitButton from './components/BitButton.vue'
app.component('BitButton', BitButton)  // 大驼峰命名
app.component('bit-button', BitButton) // 烤串命名

效果 :任意.vue文件都能用<BitButton />


💡 组件化实战:搭个页面玩玩!

目标:用组件拼出Header+Main+Footer

复制代码
<!-- App.vue -->
<template>
  <BitHeader />
  <BitMain />
  <BitFooter />
</template>

效果

彩蛋 :全局注册一个<BitButton>,全站按钮风格统一!


🚨 避坑指南

  1. 组件命名 :推荐大驼峰 (如MyPanel),或烤串法 (如my-panel

  2. 作用域CSS :加scoped,避免样式污染!

  3. 组件通信 :父子用props,全局用Pinia/Vuex(后续篇章解锁!)


🎯 总结

  • 为什么组件:拒绝复制粘贴,拥抱高效复用!

  • 组件化精髓 (化整为零)→ (灵活拼装)

  • 全局注册:一次注册,全站通行!


🚀 现在,打开你的Vue项目,把重复代码变成"乐高块"吧!

(如果卡住,默念:"组件在手,天下我有!" 😎)

相关推荐
斐济岛上有一只斐济4 分钟前
后端程序员的CSS复习
前端
Enddme7 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员8 分钟前
微信小程序使用 Tailwind CSS version 3
前端
wocwin19 分钟前
Vue移动端项目二次封装原生table组件,支持表头/数据动态配置(支持多级表头、排序);作用域插槽、render函数渲染某列数据等功能
vue.js
你怎么知道我是队长29 分钟前
python---eval函数
开发语言·javascript·python
溟洵31 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户25191624271136 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心36 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌37 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
NicolasCage38 分钟前
Icon图标库推荐
vue.js·react.js·icon