UniApp 自定义组件

自定义组件是 UniApp 开发中非常重要的一部分，它允许你创建可重用的 UI 组件，从而提高开发效率和代码的可维护性。

7. 自定义组件

7.1 创建自定义组件

自定义组件是由你定义的、可以在多个页面或组件中复用的 UI 元素。每个自定义组件都有自己的模板、样式和逻辑。

1. 创建一个自定义组件

在 components 文件夹中创建一个新的 Vue 文件。例如，创建一个名为 MyButton.vue 的自定义按钮组件。

components/MyButton.vue：

<template>
  <button :style="{ backgroundColor: color }" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'blue'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

<style scoped>
button {
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

解释：

• props：定义了组件的属性。color 是一个接受颜色值的属性。
• methods：定义了点击事件处理方法 handleClick，并通过 $emit 触发 click 事件。
• <slot>：插槽用于在组件外部插入内容。

2. 在页面中使用自定义组件

要在页面中使用自定义组件，首先需要在页面的 script 部分引入组件。

pages/index/index.vue：

<template>
  <view>
    <my-button color="red" @click="handleButtonClick">Click Me</my-button>
  </view>
</template>

<script>
import MyButton from '@/components/MyButton.vue';

export default {
  components: {
    MyButton
  },
  methods: {
    handleButtonClick() {
      uni.showToast({
        title: 'Button Clicked!',
        icon: 'success'
      });
    }
  }
}
</script>

<style>
/* 样式代码 */
</style>

解释：

• import MyButton：引入自定义组件 MyButton。
• components：将 MyButton 注册为页面组件。
• <my-button>：在模板中使用自定义组件，并传递 color 属性和监听 click 事件。

7.2 组件的生命周期

自定义组件有自己的生命周期钩子，用于处理组件的创建、更新和销毁等操作。

常见的生命周期钩子：

• created：组件实例被创建后调用。
• mounted：组件挂载到 DOM 后调用。
• updated：组件更新后调用。
• destroyed：组件销毁后调用。

例子：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  created() {
    console.log('Component Created');
  },
  mounted() {
    console.log('Component Mounted');
  },
  updated() {
    console.log('Component Updated');
  },
  destroyed() {
    console.log('Component Destroyed');
  }
}
</script>

<style>
/* 样式代码 */
</style>

解释：

• created：在组件创建时触发。
• mounted：在组件挂载到 DOM 后触发。
• updated：在组件数据更新后触发。
• destroyed：在组件销毁时触发。

7.3 组件间通信

组件间通信是指父组件与子组件之间、兄弟组件之间传递数据或触发事件。

1. 父子组件通信

父组件可以通过 props 向子组件传递数据，子组件可以通过 $emit 向父组件发送事件。

例子：

<!-- ParentComponent.vue -->
<template>
  <view>
    <child-component :message="parentMessage" @childEvent="handleChildEvent"></child-component>
  </view>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received from Child:', data);
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <view>
    <text>{{ message }}</text>
    <button @click="sendEvent">Send Event</button>
  </view>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendEvent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
}
</script>

解释：

• props：父组件通过 props 向子组件传递 message。
• $emit：子组件通过 $emit 触发 childEvent 事件，并传递数据。

2. 兄弟组件通信

兄弟组件之间的通信可以通过父组件作为中介。

例子：

<!-- ParentComponent.vue -->
<template>
  <view>
    <component-a @trigger="handleTrigger"></component-a>
    <component-b :data="sharedData"></component-b>
  </view>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      sharedData: ''
    };
  },
  methods: {
    handleTrigger(data) {
      this.sharedData = data;
    }
  }
}
</script>

<!-- ComponentA.vue -->
<template>
  <view>
    <button @click="sendData">Send Data</button>
  </view>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('trigger', 'Data from ComponentA');
    }
  }
}
</script>

<!-- ComponentB.vue -->
<template>
  <view>
    <text>{{ data }}</text>
  </view>
</template>

<script>
export default {
  props: {
    data: String
  }
}
</script>

解释：

• ComponentA 触发 trigger 事件。
• ParentComponent 监听 trigger 事件并更新 sharedData。
• ComponentB 通过 props 接收 sharedData。

通过学习这些内容，你可以创建和管理自定义组件，处理组件间的通信，增强你的 UniApp 应用的模块化和可复用性。