利用 Vue3 Composition API 创建可复用组件

在现代前端开发中，Vue.js 是一个非常流行的框架，尤其是在组件化开发方面。随着 Vue3 的发布，Composition API 的引入使得组件的管理和代码的重用变得更加灵活和高效。本文将通过一个实际的示例来展示如何利用 Vue3 的 Composition API 创建可复用组件。

什么是 Composition API？

在 Vue2 中，组件的逻辑往往混合在 data、methods、computed 等选项中，随着组件的复杂度增加，逻辑的管理变得越来越困难。为了解决这个问题，Vue3 引入了 Composition API，让我们可以将组件的逻辑提取为函数，从而提高代码的可读性和复用性。

创建可复用组件的步骤

在本篇文章中，我们将创建一个可复用的模态框组件（Modal），可以用来显示任何内容。我们会使用 Vue3 的 setup 函数和 ref、computed 等 API 来实现这个功能。

第一步：创建 Modal 组件

我们首先创建一个 Modal.vue 组件，它将接收一些 props，例如 visible（是否可见）和 title（标题）。我们还将定义两个方法：closeModal 用于关闭模态框，openModal 用于打开模态框。以下是 Modal.vue 的代码：

<template>
  <div v-if="isVisible" class="modal-overlay">
    <div class="modal">
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button @click="closeModal">X</button>
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
      <div class="modal-footer">
        <button @click="closeModal">Close</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  name: 'Modal',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      default: 'Modal Title',
    },
  },
  setup(props, { emit }) {
    const isVisible = ref(props.visible);
    
    watch(() => props.visible, (newVal) => {
      isVisible.value = newVal;
    });

    const closeModal = () => {
      isVisible.value = false;
      emit('update:visible', false); // Emit event to parent component
    };

    return {
      isVisible,
      closeModal,
    };
  },
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 500px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

组件分析

• Template 部分：使用 v-if 指令来控制模态框的显示与隐藏。在模态框的 <slot> 中，我们可以插入子组件的内容，这样使得该模态框具有更加灵活的使用方式。

• Props：接收外部传入的 visible 和 title，并使用 watch 来监听 visible 的变化，保证内部状态 isVisible 和外部 props 保持一致。

• Method：closeModal 方法用来关闭模态框，并通过 $emit 向父组件发送事件，以便父组件可以控制模态框的显示状态。

第二步：在父组件中使用 Modal 组件

现在我们将在一个父组件中使用这个可复用的模态框组件。以下是 App.vue 的代码示例：

<template>
  <div id="app">
    <h1>Welcome to Vue3 Modal Example</h1>
    <button @click="showModal = true">Open Modal</button>
    <Modal :visible="showModal" title="My Modal" @update:visible="showModal = $event">
      <p>This is the content inside the modal!</p>
    </Modal>
  </div>
</template>

<script>
import { ref } from 'vue';
import Modal from './components/Modal.vue';

export default {
  name: 'App',
  components: {
    Modal,
  },
  setup() {
    const showModal = ref(false);
    return {
      showModal,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

父组件分析

• 状态管理：在父组件的 setup 中定义 showModal 状态，用来控制模态框的显示。

• 事件处理：在 <Modal> 组件中，使用 @update:visible 事件监听模态框的关闭，然后通过 showModal = $event 更新状态。

• 插槽内容：在模态框中插入自定义内容，使得模态框的使用变得灵活多变。

总结

通过以上的步骤，我们成功地创建了一个可复用的模态框组件，并在父组件中实现了它的使用。利用 Vue3 的 Composition API，我们可以轻松地将组件逻辑进行组织与复用，从而提升了代码的可读性和维护性。

在实际开发中，不同的需求和场景可能会涉及到更多的组件组合与逻辑，这时候 Composition API 的优势将更加明显。你可以通过提取逻辑到 composables 中来进一步复用代码，提高项目的可维护性。