第5章 组件应用

第5章

组件应用5.1

组件基础概念独立可复用根组件Root每个组件是完整的Vue实例,支持data、me-thods、生命周期钩子等配置组合嵌套Header组件Main组件Footer组件通过组件树构建复杂界面,实现功能模块的高度复用接口通信PaginationArticleList通过props和events进行组件间数据传递,降低系统耦合度5.1.1基本使用方法组件定义与使用组件复用关键规则data必须为函数组件中data选项必须声明为函数而非对象每次实例化返回全新数据副本,确保状态独立为什么不能用对象对象形式会导致所有实例共享同一数据引用造成状态污染,破坏组件封装性使用ponent0)定义组件组件可接收data、computed、methods等选项(el除外)注册后以自定义元素方式使用关键语法要求ponent(组件名",{data,template,..)5.1.3组织结构局部注册全局注册使用ponent()注册注册后可在应用任何组件模板中使用适合通用性强的基础组件在组件的components选项中注册仅限父组件模板中使用适合特定场景的专用组件ponent("ButtonCounter',{...)components:(ButtonCounter:MyComponent}命名规则自闭合限制注册用PascalCase,HTML模板中用kebab-case引用如ButtonCounter引用时写HTML模板中不能使用自闭合写法非HTML模板中鼓励自闭合以表示无内容组件5.1.4

钩子函数setup0取代beforeCreate和created,封装大部分组件代码onBeforeMountonMounted按需导入钩子函数需从vue中导入,保持项目轻量化组件挂载前后的钩子importonBeforeUpdateonMounted,onUpdated}fromvue其他钩子onActivated/onDeactivated(keep-alive相关)onErrorCaptured(错误捕获)数据更新前后的钩子onUnmounted数据卸载前后的钩子组件卸载前后的钩子setup0是CompositionAP的入口,取代了beforeCreate和created5.2.1

通过props向子组件传递数据定义props传递数据使用数据21在子组件props选项中声明自定义属性props:['title']子组件内部可直接访问prop值模板中通过插值表达式渲染父组件通过属性向子组件传值作为自定义属性写在组件元素上案例:传统文化与生态保护子组件SeasonCard定义seasonData属性父组件传入节气数据对象子组件展示节气名称、气候特征、传统习俗、生态保护信息5.2.2

跨层级传递

5.2.3监听事件5.2.2Provide/Inject5.2.3$emit自定义事件祖先组件子组件触发this.$emit(\使用provide提供数据provide(\使用inject注入数据触发事件并传递参数后代组件父组件监听通过v-on指令监听子组件事件接收子组件传递的数据constdata=inject(\注意事项适用场景跨多层组件传递,避免逐层传递props如主题切换、用户信息共享注意事项事件名不自动转换大小写触发名与监听名需完全匹配provide/inject实现跨层级传递,$emit实现子→父通信5.3插槽5.3.1基本插槽5.3.2编译作用域5.3.3后备内容子组件中用声明占位符插槽内容在父组件作用域编译slot内可设置默认内容父组件传入的内容替换占位位置可访问父组件的数据父组件未提供内容时显示默认值实现组件结构固定、内容可定制不能访问子组件的数据提供内容时覆盖默认值子组件模板父组件传入内容替换占位符声明默认内容→父组件未传入→显示默认内容5.3.4具名插槽5.3.5作用域插槽5.3.6动态插槽名子组件通过slot绑定数据父组件用v-slot:default='slotProps接收解决插槽内容需访问子组件数据的问题slotProps包含所有插槽propslot元素用name属性定义命名插槽V-slotheader指定内容分发目标一个组件可包含多个具名插槽v-slot:[dynamicSlotName]动态指定插槽名根据运行时变量决定内容分发位置具名插槽→多区域分发,作用域插槽→子→父数据传递5.4.1动态组件统一渲染入口ComponentAComponentBcurrentComponent切换状态管理优化代码复用提升动态组件=component标签+is属性+可选KeepAlive缓存性能优化5.4.2

异步组件代码分割性能优化大型应用拆分为多个小块减少初始包体积,加速实现懒加载页面渲染按需加载错误边界仅在需要时加载组件,支持加载状态和错误处理,提升用户体验节省带宽资源方式2(Vue3.2+)直接返回Promise简洁写法,适用于简单场景方式1使用defineAsyncComponent包装import{defineAsyncComponent}from"vue"5.5

案例5.5.1日历组件5.5.2弹出层组件核心功能年月切换、日期选择、闰年判断月份首日星期计算、空格填充对齐设计思路弹窗独立于业务模板,挂载到body通过JavaScript动态创建和销毁实现步骤创建create()函数接收组件配置创建实例并挂载到body组件关闭时移除DOM并销毁实例调用方式create(Notice,(title,mes