uniapp组件写法
uniapp 组件的基本结构
uniapp 的组件采用 Vue 单文件组件（SFC）的写法，包含 <template>、<script> 和 <style> 三个部分。以下是一个基础示例：
<template>
<view class="my-component">
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
name: 'MyComponent',
props: {
message: {
type: String,
default: 'Hello uniapp'
}
},
data() {
return {
localData: 'Local data'
}
},
methods: {
handleClick() {
this.$emit('customEvent', 'Event payload')
}
}
}
</script>
<style scoped>
.my-component {
padding: 20rpx;
}
</style>组件注册方式
全局注册
在 main.js 中全局注册组件：
import MyComponent from '@/components/MyComponent.vue'
Vue.component('MyComponent', MyComponent)局部注册
在页面或父组件中局部引入：
<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
components: { MyComponent }
}
</script>组件通信方式
Props 传值
父组件通过属性传递数据：
<MyComponent :message="parentData" />事件触发
子组件通过 $emit 触发父组件事件：
this.$emit('update', newValue)父组件监听事件
父组件通过 @eventName 监听：
<MyComponent @update="handleUpdate" />插槽使用
默认插槽
子组件定义插槽：
<template>
<view>
<slot></slot>
</view>
</template>父组件传递内容：
<MyComponent>
<text>插入的内容</text>
</MyComponent>具名插槽
子组件定义具名插槽：
<slot name="header"></slot>父组件指定插槽：
<template v-slot:header>
<text>头部内容</text>
</template>生命周期
uniapp 组件支持 Vue 的生命周期钩子：
export default {
created() {
console.log('组件实例创建完成')
},
mounted() {
console.log('组件挂载到DOM')
}
}样式作用域
使用 scoped 属性限定样式作用域：
<style scoped>
/* 仅作用于当前组件 */
</style>平台差异处理
通过条件编译处理多平台差异：
<template>
<!-- #ifdef H5 -->
<div>H5专属内容</div>
<!-- #endif -->
</template>组件优化建议
- 复杂组件建议拆分为多个子组件
- 频繁更新的数据使用
computed计算属性 - 避免在模板中写复杂逻辑
- 使用
v-if和v-show合理控制渲染
以上是 uniapp 组件开发的核心写法和最佳实践，可根据实际需求组合使用这些特性。
