Vue -多个父母使用相同的子

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>

它工作得很好，但缺点是它会在每个按钮组件中创建一个元素。

生成的html代码(更好地描述问题) -我不允许嵌入图片。

我倾向于避免在每个使用<button-delete>组件的文件中声明一个<button-delete>(例如，在myfile.html中)。

是否有任何方法将此弹出组件添加为只向DOM添加一次并在以后重复使用的依赖项？

我想要实现的是类似于

只有<delete-confirm>元素在myfile.html中声明，没有<magnific-popup>。

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

Answer 1

将弹出放到父服务器中(在使用button-deletes的同一级别)。单击时，每个按钮都应该通过对弹出窗口执行您想做的任何操作来处理父一件大事。

Answer 2

在您的<magnific-popup>中全局注册main.js (或者在您创建根Vue实例的地方)。这样，组件只注册一次，但对所有子组件都是可用的。

您还没有在您的问题中提供工作样品，但是在我的本地测试中，这只会生成一个模式/弹出--而不是相互之间的几个。

// 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,
  //...
})