Vue 3基础入门 课件 第5章 组件应用.pptxVIP

第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引用如Bu