当前位置：首页 > uni-app

uniapp组件组装

2026-03-05 03:16:12uni-app

uniapp组件组装方法

uniapp支持组件化开发，通过组件组装可以提升代码复用性和可维护性。以下是常见的组件组装方式：

创建组件 在components目录下新建.vue文件，例如MyComponent.vue：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: '默认消息'
    }
  }
}
</script>

全局注册组件 在main.js中全局注册组件：

import MyComponent from '@/components/MyComponent.vue'
Vue.component('my-component', MyComponent)

局部注册组件 在页面或组件中局部引入：

<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
  components: {
    MyComponent
  }
}
</script>

组件通信方式

uniapp组件组装

父传子：通过props传递数据

<my-component message="来自父组件的数据"></my-component>

子传父：通过$emit触发事件


// 子组件
this.$emit('custom-event', data)

// 父组件 <my-component @custom-event="handleEvent">

uniapp组件组装


- 跨级通信：使用provide/inject
```javascript
// 祖先组件
provide() {
  return {
    theme: 'dark'
  }
}

// 后代组件
inject: ['theme']

动态组件 使用<component>标签实现动态切换：

<component :is="currentComponent"></component>

插槽使用

默认插槽：
```

<slot></slot>
```

插入内容 ```

具名插槽：


<!-- 子组件 -->
<slot name="header"></slot>

头部内容 ```

组件生命周期 组件生命周期与Vue标准组件一致，包括created、mounted等钩子函数，同时支持uniapp特有的页面生命周期。

注意事项

组件样式默认隔离，可使用options配置styleIsolation
组件应尽量保持单一职责原则
复杂组件建议拆分多个小组件组合使用
合理使用计算属性和watch处理数据变化

标签: 组件 uniapp

分享给朋友：

实现vue组件

创建 Vue 组件 Vue 组件可以通过单文件组件（.vue 文件）或直接在 JavaScript 中定义。以下是两种常见实现方式。单文件组件方式单文件组件包含模板、脚本和样式三部分，适合复杂…

uniapp极光推送

uniapp极光推送集成步骤准备工作注册极光推送开发者账号，创建应用获取AppKey。确保uniapp项目已配置好原生插件支持。安装插件在uniapp项目manifest.json文件中，…

uniapp发布到应用商店

发布到苹果App Store 确保开发者账号已注册并加入Apple Developer Program，年费99美元。在Xcode中生成iOS发布证书（.p12）和描述文件（Provisioning…

uniapp分享到facebook

使用uniapp分享到Facebook的方法在uniapp中实现分享到Facebook功能，可以通过调用原生插件或使用第三方SDK。以下是具体实现方式：安装Facebook SDK插件在un…

uniapp swiper禁止滑动

禁用 Swiper 滑动的方法在 UniApp 中，可以通过设置 disableTouch 属性或动态绑定 touchable 属性来禁止 Swiper 组件的滑动行为。方法一：通过 disab…

base64转换方法uniapp

Base64 转换方法（UniApp）在 UniApp 中实现 Base64 编码和解码，可以通过原生 JavaScript 的 btoa 和 atob 方法，或使用第三方库如 base64-js。…

uniapp组件组装