前端组件业务数据选择功能优雅写法

1. 业务场景

后台管理在实际业务中，经常可见的功能为：在当前的页面中从其他列表中选择数据。

例如，在一个商品活动列表页面中 需要选择配置的商品。

2. 遇到问题

从代码划分的角度来说，每个业务列表代码首先分散开来，各自为一个文件夹。如果想在业务A中选择业务B的数据，那么常规写法为封装一个组件，然后在当前页面中引用，代码大概如下。

import DataList from '@/xxx'

<DataList />

3. 优雅写法

但是这个看起来实在繁琐，尤其在今日学习某项目学到一种写法后再看此方式这种感觉尤为强烈。

那便是将组件挂在到 Vue.property 里，直接通过 js 代码操作。

使用方代码如下：

只需要调用一个方法，并在参数写上选择后的回调函数，回调函数的参数就是选择上的数据。

4. 实现方式

4.1 定义 Vue 组件

import Element from 'element-ui'
import '@/styles/element-variables.scss'
import cardFormComponent from './index.vue'
import Vue from 'vue'
import Cookies from 'js-cookie'

Vue.use(Element, {
    size: Cookies.get('size') || 'medium' // set element-ui default size
})
const cardFrom = {}
cardFrom.install = function(Vue, options) {
    const ToastConstructor = Vue.extend(cardFormComponent)
    // 生成一个该子类的实例
    const instance = new ToastConstructor()
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    Vue.prototype.$modalCard = function(callback) {
        instance.visible = true
        instance.callback = callback
    }
}
export default cardFrom

4.2 组件代码

<template>
    <div>
        <el-dialog
            title="优惠券列表"
            :visible.sync="visible"
            width="1400px"
            top="30px"
            :before-close="handleClose"
        >
            <data-list v-if="visible"
                       :send="true"
                       @getChooseCardIdList="getChooseCardIdList"
            />
        </el-dialog>
    </div>
</template>

<script>
import dataList from '../index.vue'

export default {
    name: 'CardForm',
    components: { dataList },
    data() {
        return {
            visible: false,
            callback: function() {
            }
        }
    },
    methods: {
        handleClose() {
            this.visible = false
        },
        getChooseCardIdList(cardIdList) {
            this.callback(cardIdList)
            this.visible = false
        }
    }
}
</script>

<style scoped>

</style>

4.3 注册Vue组件

在 main.js 配置

import cardForm from '@/views/card/card/cardForm/index.js'

Vue.use(cardForm)