vue3中的抽离封装方法实现

在Vue3中，抽离和封装方法的实现可以帮助我们更好地管理和维护代码，具体实现方法如下：

一、抽离方法

抽离方法是将一些常用的方法和逻辑，放在单独的文件（通常是一个JS文件）中，方便多个组件使用和维护。具体步骤如下：

1. 创建util.js文件，将要抽离的方法都写在这个文件内。例如：

export function formatDate(date) {
  // 对日期进行格式化的方法
}

1. 在需要使用这些方法的组件中，通过ES6的import语句来引入这个文件中的方法。

import { formatDate } from "./util"
export default {
  // 组件代码
  created() {
    const date = new Date()
    const formattedDate = formatDate(date)
    // 其他逻辑
  }
}

这样，在组件中就可以使用util.js文件中的formatDate方法了。

二、封装方法

封装方法则是将一些公共的逻辑封装成独立的组件，以便在多个地方使用。具体步骤如下：

1. 创建一个独立的组件，这里我们以一个弹窗组件为例：

<template>
  <div v-if="isVisible">
    <div class="modal-bg"></div>
    <div class="modal-box">
      <div class="modal-header">{{ title }}</div>
      <div class="modal-body">{{ content }}</div>
      <div class="modal-footer">
        <button @click="closeModal()">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    }
  },
  methods: {
    closeModal() {
      this.$emit("close")
    }
  }
}
</script>

<style scoped>
.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.modal-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  z-index: 101;
}
</style>

1. 在需要使用这个组件的地方，直接引入它，并在标记中使用。

<template>
  <div>
    <button @click="showModal()">弹出框</button>
    <Modal :is-visible="isModalVisible" :title="modalTitle" :content="modalContent" @close="closeModal"></Modal>
  </div>
</template>

<script>
import Modal from "./Modal.vue"
export default {
  components: {
    Modal
  },
  data() {
    return {
      isModalVisible: false,
      modalTitle: "",
      modalContent: ""
    }
  },
  methods: {
    showModal() {
      this.isModalVisible = true
      this.modalTitle = "提示"
      this.modalContent = "这是一个弹窗！"
    },
    closeModal() {
      this.isModalVisible = false
    }
  }
}
</script>

这样，我们就成功地封装了一个弹窗组件，并成功地在另一个组件中使用它了。

以上是抽离和封装方法实现的完整攻略，在Vue3中，抽离和封装方法的实现可以帮助我们更好地管理和维护代码，提高代码的重用性和可维护性。