Vue的一些经典写法

1、利用继承创建公共类，调用时实例化并使用

重点是：复用实例化方法

set-account-modal.vue

/*
**	一个普通的vue组件选项对象
*/
<template>
    <mtd-modal
        width="450px"
        :visible="visible" :title="title" closable
        @input="handleClose">
        <div class="content">
            <mtd-form ref="form" :rules="rules" :model="form">
                <mtd-form-item required prop="value" label="值">
                    <mtd-textarea
                        placeholder="描述信息"
                        clearable
                        v-model="form.value"
                        style="width: 260px;"
                        rows="3" maxlength="2048">
                    </mtd-textarea>
                </mtd-form-item>
            </mtd-form>
        </div>
        <div slot="footer">
            <mtd-button
                @click="handleClose">取消</mtd-button>
        </div>
    </mtd-modal>
</template>
<script>
import { setConfig } from '@/api/api';

export default {
    name: 'SetConfigModal',
    data () {
        return {
            loading: false,
            visible: false,
            type: 'add',
            title: '账号设置',
            name: '',
            value: '',
            clusterName: '',
            // 呼出该modal的tablemodule组件，用于处理modal与table的交互
            tableVm: null,

            form: {
                name: '',
                value: ''
            },
            rules: {
            }
        };
    }
};
</script>
<style scoped lang="postcss">
</style>

popModal.js

/*
** 将公共组件类，通过data实例化成不同的根实例。
*/
import Vue from 'vue';

const popModal = (modalConstructor, options) => {
    options = options || {};
    const instance = new modalConstructor({
        el: document.createElement('div'),
        data: options
    });
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => {
        instance.visible = true;
    });
    return instance;
};

export default popModal;

*.vue

/*
**	
*/
import setAccountModal from './set-account-modal.vue';// 组件选项对象
import popModal from './popModal.js';// 实例化组件类
const modalConstructor = Vue.extend(setAccountModal);// 创建新Vue构造器
const options = {
            title: '新建配置项',
            tableVm: this.$refs.tableVm,
            clusterOptions: this.clusterOptions
        };
popModal(modalConstructor, options);// 实例化新Vue构造器，并传入参数