In the development project, the Model tag is encountered as the root directory of the new component. When the Model pop-up box is closed, the v-if cannot be set in the parent component.
Parent component code

<template>
    <div>
        <button @click="clickHandle">Button</button>
        <model-plugin v-if="show" @closeModelPlugin="closeModelPlugin"></model-plugin>
    </div>
</template>
<script>
import ModelPlugin from './model-plugin'
export default {
    name: 'MetaUpdateWorkflow',
    components: {ModelPlugin},
    data () {
        return {
            show: false
        }
    },
    methods: {
        clickHandle () {
            this.show = true
        },
        closeModelPlugin () {
            this.show = false
        }
    }
}
</script>

<style scoped>
</style>

Subcomponent code

<template>
    <Modal
        :visible.sync="modal1"
        title="Ordinary Modal Dialog Title "
        @on-ok="ok"
        @on-cancel="cancel">
        <p>Dialog content</p>
        <p>Dialog content</p>
        <p>Dialog content</p>
    </Modal>
</template>
<script>
export default {
    name: 'ModelPlugin',
    components: {},
    data () {
        return {
            modal1: true
        }
    },
    methods: {
        cancel () {
            this.$emit('closeModelPlugin')
        },
        ok () {
            this.$emit('closeModelPlugin')
        }
    },
    created () {
    },
    mounted () {
    }
}
</script>

<style scoped>
</style>

Problem, at this time, it is impossible to close the pop-up box.
resolvent:
1. modal1 has been set to false when the parent component clicks OK or cancel. In fact, the subcomponent no longer exists, so the set this. Show = = false does not work.
2. The solution is to add another root directory to the Model component. When modal1 is false, the subcomponent still exists. At this time, the set this.show = = false will work.
Finally, the sub component code is modified as follows, and a layer of div is wrapped in the outer layer of the Model

<template>
    <div>
        <Modal
            :visible.sync="modal1"
            title="Ordinary Modal Dialog Title "
            @on-ok="ok"
            @on-cancel="cancel">
            <p>Dialog content</p>
            <p>Dialog content</p>
            <p>Dialog content</p>
        </Modal>
    </div>
</template>
<script>
export default {
    name: 'ModelPlugin',
    components: {},
    data () {
        return {
            modal1: false
        }
    },
    methods: {
        cancel () {
            this.$emit('closeModelPlugin')
        },
        ok () {
            this.$emit('closeModelPlugin')
        }
    },
    created () {
    },
    mounted () {
    }
}
</script>

<style scoped>
</style>