在vue2中工厂模式的应用

在 Vue2 中，工厂模式可以用来创建可复用的组件。通常情况下，我们会在一个单独的文件中创建一个组件，并将其导出，然后在其它组件中引入并使用。但是，有些时候我们需要创建多个具有相同功能的组件，这时候就可以使用工厂模式。

首先，在一个单独的文件中创建一个基础组件，并将其导出：

// BaseButton.vue

<template>
  <button class="base-button" @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'BaseButton',
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
}
</script>

<style>
.base-button {
  padding: 10px;
  border-radius: 5px;
  background-color: #3498db;
  color: #fff;
  font-size: 16px;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>

然后，在需要使用该组件的地方，创建一个工厂函数，用于创建多个具有相同功能的组件：

// ButtonFactory.js

import BaseButton from './BaseButton.vue';

export const createButton = (text) => {
  return {
    extends: BaseButton,
    props: {
      buttonText: {
        type: String,
        default: text
      }
    }
  }
}

在上面的代码中，我们定义了一个 `createButton` 工厂函数，它接受一个参数 `text`，用于设置按钮的文本内容。该函数返回一个新的组件对象，该对象继承了 `BaseButton` 组件，并定义了一个 `buttonText` 属性，用于设置按钮文本内容。

最后，在需要使用该工厂函数的地方，调用它来创建多个具有相同功能的组件：

// App.vue

<template>
  <div>
    <Button1 @click="onClick">{{ buttonText1 }}</Button1>
    <Button2 @click="onClick">{{ buttonText2 }}</Button2>
  </div>
</template>

<script>
import { createButton } from './ButtonFactory';

const Button1 = createButton('Button 1');
const Button2 = createButton('Button 2');

export default {
  name: 'App',
  components: {
    Button1,
    Button2
  },
  data() {
    return {
      buttonText1: 'Click me',
      buttonText2: 'Click me too'
    }
  },
  methods: {
    onClick() {
      console.log('Button clicked');
    }
  }
}
</script>

在上面的代码中，我们首先导入了 `ButtonFactory.js` 中的 `createButton` 工厂函数，并调用它来创建两个具有相同功能的组件 `Button1` 和 `Button2`。然后，在 `App.vue` 组件中使用这两个组件，并设置它们的文本内容。当按钮被点击时，会触发 `onClick` 方法，并输出一条信息到控制台。

通过使用工厂模式，我们可以更方便地创建多个具有相同功能的组件，并可以在不同的组件中使用它们。