Question

Vue.js中是否有一种方法可以让多个父母使用同一个孩子？

我想要多个删除按钮来触发具有不同内容的单个模态。

示例

myfile.html：

<table id="app" class="table table-striped table-sm table-responsive-md">
    <thead>
        <tr>
            <th>Title</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="post">
            <td>Test2</td>
            <td>
                <delete-confirm popup-title="Are you sure ?" popup-message="Message 1">
                    Delete
                </delete-confirm>
            </td>
        </tr>
        <tr class="post">
            <td>Test article</td>
            <td>
                <delete-confirm popup-title="Are you sure ?" popup-message="Message 2">
                    Delete
                </delete-confirm>
            </td>
        </tr>
    </tbody>
</table>

app.js：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('delete-confirm', require('./components/DeleteConfirm.vue'));
Vue.component('magnific-popup', require('./components/MagnificPopup.vue'));

const app = new Vue({
    el: '#app'
});

部件/ DeleteConfirm.vue：

<template>
    <span>
        <button ref="button" @click="showConfirmation($event.target)" class="btn btn-danger">
            <i class="fa fa-trash"></i> <slot></slot>
        </button>

        <magnific-popup v-on:click="click" ref="popup">
            <h2 slot="title">{{ popupTitle }}</h2>
            <p slot="content">{{ popupMessage }}</p>
        </magnific-popup>
    </span>
</template>

<script>
    import $ from 'jquery';

    export default {
        props: ['popupTitle', 'popupMessage'],
        methods: {
            showConfirmation(target) {
                this.$refs.popup.open(target);
            },
            click(type) {
                this.$refs.popup.close();

                if (type === 'confirm') {
                    $.ajax({
                        url: '404me',
                        type: 'DELETE',
                    }).then(() => { /* TODO */ }).catch(() => { /* TODO */ });
                }
            }
        },
    };
</script>

部件/ MagnificPopup.vue：

<template>
    <div class="white-popup zoom-anim-dialog mfp-hide">
        <div class="container bg-light col-8 mx-auto p-3 rounded">
            <slot name="title"></slot>
            <div class="popup-content">
                <slot name="content"></slot>
            </div>
            <div class="popup-actions">
                <button type="button" @click="sendYes" class="btn btn-primary">
                    Yes
                </button>
                <button type="button" @click="sendNo" class="btn btn-secondary">
                    No
                </button>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    require('magnific-popup');

    export default {
        methods: {
            sendYes() {
                this.$emit('click', 'confirm');
            },
            sendNo() {
                this.$emit('click', 'cancel');
            },
            close: function() {
                $.magnificPopup.close();
            },
            open: function(trigger) {
                $.magnificPopup.open({
                    items: {
                        src: this.$el,
                    },
                    midClick: true,
                    mainClass: 'my-mfp-zoom-in',
                    fixedContentPos: false,
                    fixedBgPos: true,
                    overflowY: 'auto',
                    closeBtnInside: true,
                    preloader: false,
                    removalDelay: 300,
                });
            },
        }
    };
</script>

<style lang="scss">
    @import '~magnific-popup/src/css/main';
    @import '../../css/magnific-popup.css';
</style>

它运作良好，但缺点是它会为每个按钮组件创建一个magnific-popup dom元素。

Generated html code (describes the problem better) - 我不允许嵌入图片。

我希望避免在每个使用<magnific-popup>组件的文件中声明<button-delete>（例如在 myfile.html 中）。

有没有办法将此弹出组件添加为仅向DOM添加一次并稍后重新使用的依赖项？

我希望实现的目标是

myfile.html 中仅声明了<delete-confirm>个元素，没有<magnific-popup>。

将MagnificPopup声明为DeleteConfirm的依赖关系，以便每当使用一个或多个<delete-confirm>元素时，将一个<magnific-popup>元素添加到的DOM中myfile.html

Answer 1

将弹出窗口放在父窗口中（使用button-delete的同一级别）。点击后，每个按钮应该$emit an event父母通过对弹出窗口做任何你想做的事来处理。

Answer 2

在<magnific-popup>（或创建根Vue实例的任何位置）全局注册main.js。这样组件只能注册一次，但对所有子组件都可以使用。

你还没有在你的问题中提供working sample，但是在我的本地测试中，这只会产生一个模态/弹出窗口 - 而不是几个模型/弹出窗口。

// main.js

// Register your popup...
import MagnificPopup from '@/components/MagnificPopup'
Vue.component('magnific-popup', MagnificPopup)

// ...just before you create your Vue instance
new Vue({
  el: '#app',
  router,
  store,
  //...
})

Vue - 多个父母使用同一个孩子

2 个答案: