Uni-App 自定义组件：打造个性化的组件库

Uni-App 提供了强大的自定义组件功能，允许开发者创建自己的组件，以满足特定的需求。这篇文章将带你深入了解 Uni-App 自定义组件的创建和使用，并通过丰富的实例帮助你快速上手。

1. 组件的定义与构成

1.1 组件的概念

组件是可重复使用的 UI 代码块，它封装了特定的功能和样式。在 Uni-App 中，组件可以是简单的文本展示，也可以是复杂的交互式元素，例如：

文本展示组件: 用于展示标题、段落、图片等内容。
表单组件: 用于收集用户输入信息，例如输入框、选择框、日期选择器等。
交互组件: 用于实现用户交互功能，例如按钮、滑块、开关等。

1.2 组件的构成

一个 Uni-App 自定义组件通常由以下部分组成：

模板 (template): 定义组件的结构和布局，使用 Vue 模板语法。
脚本 (script): 负责组件的行为逻辑，使用 JavaScript 代码。
样式 (style): 负责组件的视觉样式，使用 CSS 代码。

2. 创建自定义组件

2.1 创建组件目录

在你的项目目录下创建一个名为 components 的文件夹，用于存放所有的自定义组件。例如，创建一个名为 my-button 的组件，则目录结构如下：

components/
  |- my-button/
    |- my-button.vue

2.2 编写组件代码

在 my-button.vue 文件中编写组件代码，包括模板、脚本和样式。

<template>
  <button class="my-button" @click="onClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    text: {
      type: String,
      default: '点击我'
    }
  },
  methods: {
    onClick() {
      console.log('按钮被点击了！')
    }
  }
}
</script>

<style lang="scss" scoped>
.my-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
</style>

解释：

template: 定义一个按钮元素，绑定 onClick 事件监听器，并使用 text 属性显示按钮文本。
script:
- name: 组件名称，用于标识组件。
- props: 定义组件接收的属性，text 属性用于指定按钮的文本，默认值为 点击我。
- methods: 定义组件的方法，onClick 方法在按钮被点击时触发，并输出一条信息到控制台。
style: 使用 scss 语法定义按钮的样式，包括背景色、文本颜色、填充、边框和光标样式。

2.3 组件注册

在需要使用该组件的页面中，需要先注册组件。有两种注册方式：

全局注册: 在 main.js 文件中注册组件，所有页面都可以使用该组件。

import Vue from 'vue'
import App from './App'
import MyButton from './components/my-button/my-button.vue'

Vue.component('MyButton', MyButton)

new Vue({
  el: '#app',
  render: h => h(App)
})

局部注册: 在需要使用组件的页面中注册，只在这个页面可以使用。

<template>
  <div>
    <MyButton text="自定义按钮" />
  </div>
</template>

<script>
import MyButton from '../components/my-button/my-button.vue'

export default {
  components: {
    MyButton
  }
}
</script>

3. 组件属性和事件

3.1 传递属性

组件可以通过 props 属性接收父组件传递的属性，用于控制组件的行为和样式。在上面的 MyButton 组件中，text 属性用于控制按钮的文本。

3.2 触发事件

组件可以通过事件机制与父组件进行交互。在上面的 MyButton 组件中，onClick 事件在按钮被点击时触发，可以使用 $emit 方法向父组件发送事件信息。

<template>
  <button class="my-button" @click="onClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  // ...
  methods: {
    onClick() {
      this.$emit('click', '按钮被点击了！')
    }
  }
}
</script>

3.3 接收事件

在父组件中，可以使用 v-on 指令监听子组件触发的事件，并接收事件信息。

<template>
  <div>
    <MyButton @click="onButtonClick" :text="buttonText" />
  </div>
</template>

<script>
import MyButton from '../components/my-button/my-button.vue'

export default {
  data() {
    return {
      buttonText: '自定义按钮',
    }
  },
  methods: {
    onButtonClick(message) {
      console.log(message)
    }
  },
  components: {
    MyButton
  }
}
</script>

4. 组件样式

4.1 scoped 样式

在组件的 <style> 标签中添加 scoped 属性，可以将样式限定在当前组件内，避免与其他组件的样式冲突。

<style lang="scss" scoped>
.my-button {
  // ...
}
</style>

4.2 深度选择器

当需要修改子组件元素的样式时，可以使用深度选择器。深度选择器使用 >>> 或 /deep/ 符号，可以穿透组件的 scoped 样式。

<style lang="scss" scoped>
.my-button >>> button {
  // 修改按钮的样式
}
</style>

4.3 样式覆盖

在父组件的 <style> 标签中，可以使用 :global 指令覆盖组件的默认样式。

<style>
:global(.my-button) {
  background-color: #ff0000;
}
</style>

5. 组件嵌套

Uni-App 支持组件嵌套，可以将一个组件作为另一个组件的子组件。

<template>
  <div>
    <MyButton text="按钮 1" />
    <MyButton text="按钮 2" />
  </div>
</template>

6. 实例：创建可复用评分组件

6.1 创建组件 star-rating.vue

<template>
  <div class="star-rating">
    <span
      v-for="(star, index) in stars"
      :key="index"
      :class="{
        'star-active': index < rating,
        'star-inactive': index >= rating
      }"
      @click="setRating(index + 1)"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  name: 'StarRating',
  props: {
    rating: {
      type: Number,
      default: 0
    },
    maxRating: {
      type: Number,
      default: 5
    }
  },
  computed: {
    stars() {
      return new Array(this.maxRating).fill(null);
    }
  },
  methods: {
    setRating(rating) {
      this.$emit('update:rating', rating);
    }
  }
}
</script>

<style lang="scss" scoped>
.star-rating {
  display: inline-block;
  font-size: 20px;
  color: #ccc;
}

.star-active {
  color: #ffc107;
}
</style>

6.2 在页面中使用组件

<template>
  <div>
    评分：{{ rating }}
    <StarRating v-model="rating" :maxRating="5" />
  </div>
</template>

<script>
import StarRating from '../components/star-rating/star-rating.vue'

export default {
  data() {
    return {
      rating: 3
    }
  },
  components: {
    StarRating
  }
}
</script>

解释:

StarRating 组件通过 props 接收 rating 和 maxRating 属性，并使用 v-for 循环生成多个星形图标。
通过 v-model 双向绑定 rating 属性，可以在页面中实时显示和修改评分。
当用户点击星形图标时，触发 setRating 方法，并使用 $emit 向父组件发送新的评分值。

7. 总结

Uni-App 自定义组件提供了强大的功能，可以帮助开发者创建可复用、易维护的 UI 代码块，提升开发效率和代码质量。通过以上教程，相信你已经对 Uni-App 自定义组件有了更深入的理解，并能够创建出满足特定需求的个性化组件。

更多学习资料：

Uni-App 官方文档： https://uniapp.dcloud.io/
Uni-App 组件库： https://ext.dcloud.net.cn/plugin?type=uni

希望这篇文章能够帮助你更好地理解和运用 Uni-App 自定义组件功能，打造出更加优秀的应用程序。