当前位置：首页 > uni-app

uniapp定义的组件

2026-02-06 09:23:13uni-app

组件定义方式

在UniApp中，组件可以通过两种方式定义：全局组件和局部组件。全局组件在main.js中注册，局部组件在页面或组件的components选项中注册。

全局组件示例（main.js中）：

import Vue from 'vue'
import MyComponent from './components/MyComponent.vue'

Vue.component('my-component', MyComponent)

局部组件示例（页面或组件中）：

import MyComponent from '@/components/MyComponent.vue'

export default {
  components: {
    'my-component': MyComponent
  }
}

组件文件结构

UniApp组件通常以单文件组件（.vue文件）形式存在，包含三个部分：

<template>：模板部分，编写组件结构
<script>：逻辑部分，定义组件行为
<style>：样式部分，定义组件样式

示例组件文件（MyComponent.vue）：

<template>
  <view class="my-component">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello World'
    }
  }
}
</script>

<style>
.my-component {
  padding: 20px;
}
</style>

组件通信机制

UniApp组件通信遵循Vue.js的通信机制，主要包括以下几种方式：

Props：父组件向子组件传递数据
Events：子组件通过$emit向父组件发送事件
Refs：父组件通过ref属性访问子组件实例
Provide/Inject：跨层级组件通信
Vuex：全局状态管理

Props示例：

<!-- 父组件 -->
<template>
  <child-component :title="parentTitle" />
</template>

<!-- 子组件 -->
<script>
export default {
  props: ['title']
}
</script>

事件示例：

<!-- 子组件 -->
<template>
  <button @click="handleClick">Click</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'data')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @custom-event="handleEvent" />
</template>

生命周期钩子

UniApp组件生命周期与Vue组件生命周期一致，常用钩子包括：

created：组件实例创建完成
mounted：组件挂载到DOM后
updated：数据更新导致DOM重新渲染后
destroyed：组件销毁后

示例：

export default {
  created() {
    console.log('组件创建')
  },
  mounted() {
    console.log('组件挂载')
  }
}

样式作用域

通过scoped属性可以实现组件样式作用域隔离，避免样式污染：

<style scoped>
/* 这里的样式只作用于当前组件 */
</style>

平台差异处理

UniApp支持条件编译处理多平台差异：

uniapp定义的组件

<template>
  <!-- #ifdef H5 -->
  <div>H5特有内容</div>
  <!-- #endif -->
  <!-- #ifdef MP-WEIXIN -->
  <view>微信小程序特有内容</view>
  <!-- #endif -->
</template>