vue 工厂模式

先准备想要的input

然后编写，举两个实例：

<template>
<el-button icon="el-icon-search" @click="query" type="primary">查询
  </el-button>
</template>
<script>
  export default {
    name: "QueryInput",
    inject:{
    mostQuery: {
      from:'query',
        default: ''
      }
    },
    method: {
      query() {
        this.mostQuery();
      }
    }
  }
</script>
<style scoped>
</style>

<template>
  <el-button icon="el-icon-circle-plus-outline" @click="add" type="primary">新增
  </el-button>
</template>

<script>
export default {
  name: "AddInput",
  inject: {
    mostAdd:{
      from:'add',
      default:()=>{}
    }
  },
  methods: {
    add() {
      this.mostAdd();
    }
  }
}
</script>

<style scoped>

</style>

然后创建好基本组件，并封装好中间组件

<template>
  <component :is="comInput"/>
</template>

<script>
import AddInput from "../input/add-input.vue"
import QueryInput from "../input/query-input.vue"
import BackInput from "../input/back-input.vue"

const inputMap = {
  QueryInput,
  AddInput,
  BackInput
}

export default {
  name: "InputFactory",
  props: {
    name: '',
  },
  computed: {
    comInput() {
      return inputMap[this.name]
    }
  },
  components: inputMap
}
</script>

<style scoped>

</style>

然后在使用工厂模式

<template>
  <div>
    <InputFactory
        v-for="item in inputList"
        :type="type"
        :name="item"
        :key="item"
    />
  </div>
</template>

<script>
import InputFactory from "../input-factory.vue"

const formMap = {
  'syuqr': ['QueryInput', 'BackInput'],
}

export default {
  name: "CommonSearch",
  props: {
    type: '',
  },
  computed: {
    inputList() {
      return formMap[this.type]
    }
  },
  components: {
    InputFactory
  }
}
</script>

<style scoped>

</style>

最后使用

<template>
  <CommonSearch :type="type"></CommonSearch>
</template>

<script>
  import CommonSearch from "../common-search.vue" 
  export default {
   provide() {
    return {
      query: this.query,
    }
  },
  data() {
    return {
       type: 'syuqr',
    }
  },
   methods: {
     query(){
       console.log('123')
     }
   }
  }
</script>