uniapp组件组装

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

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

组件优化技巧

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