组件与页面的深度解析

核心区别

特性	页面	组件
路由	有独立路由	无路由，依赖页面引用
生命周期	包含页面特有生命周期（onLoad、onShow等）	仅 Vue 组件生命周期
配置	在 pages.json 中配置	通过 props 接收配置
用途	完整页面展示	页面局部功能封装

自定义组件高级用法

1. 组件通信

   • 父传子：props
   • 子传父：$emit
   • 跨层级：provide/inject

   // 父组件
   provide() {
     return {
       theme: 'dark'
     }
   }
   
   // 子组件
   inject: ['theme']

   • 全局通信：Vuex 或 uni.$emit/uni.$on

2. 组件复用策略

   • 抽象组件：封装通用逻辑，不直接渲染 DOM
   • 高阶组件：通过函数返回增强组件

   function withLoading(Component) {
     return {
       props: Component.props,
       data() {
         return { loading: true }
       },
       async mounted() {
         await this.$nextTick()
         this.loading = false
       },
       render(h) {
         return h(Component, {
           props: this.$props,
           on: this.$listeners
         }, this.loading ? h('loading') : this.$slots.default)
       }
     }
   }