当前位置：首页 > 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传递数据，子组件需声明接收属性：

uniapp组件组装

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

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

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

插槽使用

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

uniapp组件组装

<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安装组件后，按需导入：

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

组件优化技巧

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

标签: 组件 uniapp

分享给朋友：

vue实现水印组件

Vue 水印组件实现基础水印组件实现创建一个基础水印组件，通过 props 接收文本、颜色、大小等参数： <template> <div class="watermark-…

vue实现下拉刷新组件

Vue 下拉刷新组件实现核心思路通过监听 touch 事件计算滑动距离，结合 CSS 过渡动画实现下拉效果，触发刷新回调。基础实现步骤监听 touch 事件在组件 mounted 阶段绑定…

实现vue组件

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

uniapp如何赋值

uniapp 赋值方法在 uniapp 中，赋值操作可以通过多种方式实现，具体取决于数据类型和场景。数据绑定赋值在模板中使用 {{}} 进行数据绑定，通过修改 data 中的值实现动态更新。…

uniapp隐藏右侧滚动条

隐藏右侧滚动条的方法在UniApp中隐藏右侧滚动条可以通过CSS样式实现，适用于H5、小程序等平台。以下是几种常见的方法：全局样式设置在App.vue的全局样式中添加以下CSS代码，适用于所…

base64转换方法uniapp

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

uniapp组件组装