重用包含 x-template 的 Vue 组件？

Question

我有一个 vue 模板，我改编自 vue.js 文档以提供模态以确认操作。

<template>
    <span>
        <button class="btn btn-sm btn-info" @click="showModal=true">Edit</button>
        <script type="text/x-template" id="modal-template">
            <transition name="modal">
                <div class="modal-mask">
                    <div class="modal-wrapper">
                        <div class="modal-container">
                            <div class="modal-header">
                                <slot name="header">
                                    Custom Header
                                </slot>
                            </div>
                            <div class="modal-body">
                                <slot name="body">
                                    Custom Body
                                </slot>
                            </div>
                            <div class="modal-footer">
                                <slot name="footer">
                                    Custom Footer
                                </slot>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </script>

        <modal v-if="showModal" @close="showModal=false">
            <h3 slot="header" class="ml-auto mr-auto">Edit Resource Type</h3>
            <div slot="body">
                <p>This will replace all instances of {{originalName}} in the database.</p>
                <input v-model="name">
            </div>
            <span slot="footer">
                <button class="btn btn-sm btn-info ml-auto" @click="showModal=false">
                    Cancel
                </button>
                <button class="btn btn-sm btn-danger ml-1" @click="onEdit">
                    Update
                </button>
            </span>
        </modal>

    </span>
</template>
<script>
    export default {
        props: ['itemId', 'itemName'],

        data() {
            return {
                showModal: false,
                id: this.itemId,
                name: this.itemName,
                originalName: this.itemName
            }
        },

        methods: {
            onEdit() {
                this.showModal = false;
                axios({
                    method: 'PUT',
                    url: '/resource_types/'+this.id,
                    data: {id: this.id, name: this.name},
                    config: { headers: {'Content-Type': 'multipart/form-data' }}
                })
                    .then(response => {
                        history.go(0);
                    })
                    .catch(e => {
                        this.errors.push(e);
                })
            }
        }
    }
</script>
<style>
    .modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        display: table;
        transition: opacity .3s ease;
    }

    .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
    }

    .modal-container {
        width: 300px;
        margin: 0px auto;
        padding: 15px 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
        transition: all .3s ease;
        font-family: Helvetica, Arial, sans-serif;
    }

    .modal-header h3 {
        margin-top: 0;
        color: red;
    }

    .modal-body {
        margin: 15px 0;
    }

    .modal-default-button {
        float: right;
    }

    /*
     * The following styles are auto-applied to elements with
     * transition="modal" when their visibility is toggled
     * by Vue.js.
     *
     * You can easily play with the modal transition by editing
     * these styles.
     */

    .modal-enter {
        opacity: 0;
    }

    .modal-leave-active {
        opacity: 0;
    }

    .modal-enter .modal-container,
    .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>

如何简化此操作以便重复使用该组件？

我尝试将 x-template 提取到它自己的 component 中，但没有成功。

我想要的是能够使用 one 模板并传递插槽的内容和“POST”/“PUT”网址。

目前我有 3 个models 我需要更新/删除，并有 6 个组件来处理这个问题。好像有很多重复。我正在考虑一个用于编辑的可重用组件和一个用于删除的组件。我

Answer 1

不是对您的问题的直接回答，但对于评论来说太大了。

只需要一个模态的另一种方法是利用单个模态体内的匿名组件。

<component ref="modal" v-bind:is="modalView" v-bind:item="item"></component>

然后要更改模态内容，您只需更新 modalView 属性即可。

import editView from './components/modal/edit';
import deleteView from './components/delete';

showEditView() {
    this.modalView = editView;
    this.openModal();
}