uniapp组件写法
uniapp组件的基本结构
在uniapp中创建组件通常需要遵循Vue单文件组件（SFC）规范。一个典型的组件文件包含<template>、<script>和<style>三个部分。
<template>
<view class="example-component">
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
name: 'ExampleComponent',
props: {
msg: {
type: String,
default: 'Hello'
}
},
data() {
return {
message: this.msg
}
},
methods: {
updateMessage(newMsg) {
this.message = newMsg
}
}
}
</script>
<style scoped>
.example-component {
padding: 20px;
}
</style>组件的注册与使用
全局注册通常在main.js中进行：
import Vue from 'vue'
import ExampleComponent from '@/components/ExampleComponent.vue'
Vue.component('example-component', ExampleComponent)局部注册在页面或父组件中进行：
<script>
import ExampleComponent from '@/components/ExampleComponent.vue'
export default {
components: {
ExampleComponent
}
}
</script>使用组件：
<template>
<view>
<example-component msg="Welcome"></example-component>
</view>
</template>组件间的通信方式
父组件向子组件传递数据：
<child-component :propName="parentData"></child-component>子组件向父组件发送事件：
// 子组件
this.$emit('custom-event', payload)
// 父组件
<child-component @custom-event="handleEvent"></child-component>插槽的使用
默认插槽：
<!-- 子组件 -->
<view>
<slot></slot>
</view>
<!-- 父组件 -->
<child-component>
<text>默认插槽内容</text>
</child-component>具名插槽：
<!-- 子组件 -->
<view>
<slot name="header"></slot>
<slot name="footer"></slot>
</view>
<!-- 父组件 -->
<child-component>
<template v-slot:header>
<text>头部内容</text>
</template>
<template v-slot:footer>
<text>底部内容</text>
</template>
</child-component>生命周期钩子
uniapp组件支持Vue的所有生命周期钩子：
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
// uniapp特有生命周期
onLoad() {},
onShow() {},
onReady() {},
onHide() {},
onUnload() {}
}样式作用域
使用scoped属性可限制样式作用域：
<style scoped>
/* 仅作用于当前组件 */
</style>条件与循环渲染
条件渲染：
<view v-if="show">显示内容</view>
<view v-else>备选内容</view>循环渲染：
<view v-for="(item, index) in items" :key="index">
{{ item.text }}
</view>表单组件绑定
使用v-model实现双向绑定：
<input v-model="inputValue" type="text">
<checkbox-group v-model="checkedValues">
<checkbox value="option1"></checkbox>
<checkbox value="option2"></checkbox>
</checkbox-group>自定义事件处理
组件内部触发事件：
methods: {
handleClick() {
this.$emit('click', eventData)
}
}外部监听事件：
<custom-button @click="handleButtonClick"></custom-button>组件性能优化
使用v-once进行静态内容优化：
<text v-once>永不改变的内容</text>合理使用计算属性：
computed: {
filteredList() {
return this.list.filter(item => item.active)
}
}
