uniapp定义的组件

uniapp 自定义组件的定义方式

在 uniapp 中，自定义组件是一种可复用的 UI 单元，通常用于封装特定的功能或样式。自定义组件通过 .vue 文件定义，包含模板、脚本和样式三部分。

组件文件结构示例：

<template>
  <view class="custom-component">
    <text>{{ title }}</text>
  </view>
</template>

<script>
export default {
  name: 'CustomComponent',
  props: {
    title: {
      type: String,
      default: '默认标题'
    }
  },
  data() {
    return {
      localData: '组件内部数据'
    }
  },
  methods: {
    handleClick() {
      this.$emit('customEvent', { detail: '事件数据' })
    }
  }
}
</script>

<style>
.custom-component {
  padding: 10px;
  background-color: #f5f5f5;
}
</style>

组件注册与使用

全局注册： 在 main.js 中全局注册组件后，所有页面可直接使用：

import CustomComponent from '@/components/CustomComponent.vue'
Vue.component('CustomComponent', CustomComponent)

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

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

模板中使用：

<template>
  <view>
    <custom-component title="传入的标题" @customEvent="handleEvent" />
  </view>
</template>

组件通信机制

Props 向下传递： 父组件通过属性向子组件传递数据：

<child-component :propName="parentData" />

Events 向上通知： 子组件通过 $emit 触发父组件监听的事件：

this.$emit('eventName', payload)

Ref 访问实例： 父组件通过 ref 直接调用子组件方法：

<child-component ref="childRef" />
<script>
this.$refs.childRef.childMethod()
</script>

组件生命周期

uniapp 自定义组件支持 Vue 的标准生命周期钩子：

• beforeCreate / created
• beforeMount / mounted
• beforeUpdate / updated
• beforeDestroy / destroyed

同时支持 uniapp 特有的应用生命周期：

• onShow / onHide（页面级组件）
• onLoad / onUnload（页面级组件）

组件样式隔离

通过 style 标签的 scoped 属性实现样式隔离：

<style scoped>
/* 仅作用于当前组件 */
</style>

注意事项：

• 组件名建议使用 PascalCase 命名
• 事件名建议使用 kebab-case 命名
• 避免在组件中直接修改 props 值
• 复杂组件建议使用 v-model 实现双向绑定