当前位置：首页 > uni-app

uniapp组件组装

2026-02-06 01:29:12uni-app

uniapp组件组装方法

组件创建与注册

在components目录下创建自定义组件，文件名建议以my-前缀区分。组件需通过name属性定义标识符，例如：

<template>
  <view class="my-component">自定义内容</view>
</template>
<script>
export default {
  name: 'my-component'
}
</script>

全局注册组件

在main.js中全局注册组件，避免重复导入：

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

局部注册组件

页面或组件内通过components选项局部注册：

import MyComponent from '@/components/my-component.vue'
export default {
  components: { MyComponent }
}

组件通信方式

父子组件通过props传递数据，子组件需声明接收属性：

props: {
  title: {
    type: String,
    default: '默认标题'
  }
}

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

this.$emit('custom-event', payload)

插槽使用

通过slot实现内容分发，具名插槽可指定插入位置：

<template>
  <view>
    <slot name="header"></slot>
    <slot></slot>
  </view>
</template>

组件生命周期

组件可使用标准Vue生命周期钩子，如created、mounted等。uniapp特有的onShow、onHide等页面生命周期不适用于组件。

样式隔离

添加scoped属性实现组件样式隔离：

<style scoped>
.my-class { color: red }
</style>

第三方组件集成

通过npm安装组件后，按需导入：

uniapp组件组装

import { uniBadge } from '@dcloudio/uni-ui'
export default {
  components: { uniBadge }
}

组件优化技巧

使用v-if和v-show控制渲染，复杂组件可拆分为多个子组件。对于静态内容使用v-once提升性能。

标签: 组件 uniapp

分享给朋友：

uniapp模板库

uniapp模板库推荐官方模板库 uni-app官方提供多个模板，涵盖电商、社交、新闻等多个领域。这些模板可直接在HBuilderX中通过新建项目选择，包含基础结构和常用功能模块，适合快速启动项目。…

uniapp前端项目

Uniapp 前端项目开发指南 Uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（如微信小程序、H5、App 等）。以下是关于 Uniapp 前端项目的关键信息：环…

uniapp组件写法

Uniapp 组件的基本写法 Uniapp 的组件写法与 Vue 类似，支持单文件组件（.vue 文件）。一个基本的组件通常包含三个部分：<template>、<script>…

uniapp 用法

uniapp 基本概念 uniapp 是一个基于 Vue.js 的跨平台开发框架，支持编译到 iOS、Android、H5 及小程序等多端。其核心特点是“一次开发，多端发布”，通过条件编译实现平台差异…

vue VUE实现日历组件功能

Vue 日历组件实现方法基础日历结构使用Vue的模板语法构建日历的HTML结构，通常包含头部（年月显示、切换按钮）和日历表格（星期标题和日期格子）。 <template> <…

vue实现组件跟随

Vue 实现组件跟随效果实现组件跟随效果通常需要监听鼠标或触摸事件，动态更新组件位置。以下是几种常见实现方式：使用鼠标事件绑定 <template> <div class=…

uniapp组件组装