在vue中封装可复用的组件方法

在Vue中封装可复用的组件方法是一个非常常见的需求。以下是实现这个目标的完整攻略：

1.组件化

首先，我们需要按照Vue的“组件化”思想，将页面划分为一些小的、可复用的组件。每个组件只负责显示自身的内容，通过组合这些小组件来构建整个页面。

2.公共方法

接着，我们需要考虑哪些代码是可以被封装成公共方法的。这些方法可以是与UI无关的纯函数，也可以是处理UI逻辑的函数。通过封装这些函数，可以使得代码更加模块化，并可以重用业务逻辑。

以下是一个公共方法的示例，该方法可以接受一个数值，并将它格式化为货币值：

export function formatCurrency(value) {
  if (typeof value !== 'number') {
    return value;
  }

  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  });

  return formatter.format(value);
}

3.混入

接下来，我们需要找到一种方式让公共方法在不同的组件之间共享。Vue提供了一个“混入”（mixin）的概念，允许将一些代码混入到多个组件中。混入是Vue中一个可以重用一些逻辑代码的函数或对象。

以下是一个混入的示例，该混入为多个组件提供了一个名为"visible"的响应式属性，并在组件销毁时取消掉属性的监听事件：

export const visibleMixin = {
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.visible = true;
    })
  },
  methods: {
    hide() {
      this.visible = false;
    },
    show() {
      this.visible = true;
    }
  },
  beforeDestroy() {
    this.hide();
  }
};

4.插件

最后，我们需要考虑一种方式将公共方法和混入全局注册，以便可以在应用的任何部分进行使用。Vue提供了一种机制来实现这个目标，即插件（plugin）。插件是为Vue应用程序提供特定功能的模块。通常，插件添加全局方法或混入一些组件选项。

以下是一个插件的示例，该插件为Vue组件注册了之前定义的"visibleMixin"混入，并添加了一个全局方法"formatCurrency"：

import { visibleMixin } from './mixins';

const MyPlugin = {
  install(Vue) {
    Vue.mixin(visibleMixin);
    Vue.prototype.formatCurrency = formatCurrency;
  }
};

export default MyPlugin;

当以上插件被注册到Vue应用程序时，formatCurrency 函数和 visibleMixin 混入将可在整个应用中使用。

总结

通过上述步骤，我们可以轻松封装可复用的组件方法：

1.将页面划分为小的、可复用的组件。

2.封装一些与UI无关的纯函数或处理UI逻辑的函数。

3.使用混入将公共方法混入到多个组件中。

4.使用插件将公共方法和混入全局注册，以便可以在整个Vue应用中使用。

通过封装这些组件方法，我们可以使Vue应用程序更具模块化，使得业务逻辑更容易理解和维护。