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)
  }
}