Problems caused by using iview's Model dialog: the pop-up window can only be opened once, or it can't be triggered at all.
After troubleshooting, this.$emit cannot trigger the method of the parent component because it is different from other methods.

Key points record:
1. When a parent component passes a method to a child component, it is required to prefix the method name with @ on.

@on-Method name="Parent component method name"

The child component calls the method of the parent component: this.$emit('on - method name ');
2. If the dialog box has only one button, and the text of the Cancel button is set to empty, it will not be displayed. If the text of the set OK button is empty, it is invalid.
3. You can directly use the switch attribute in props, or you can define the switch attribute in data and assign the switch attribute of props to the switch attribute of data. The method of defining additional attributes in data is generally used for
You need to do other logical processing on this attribute in the subcomponent.
4. Switch switching is realized by monitoring the switch attributes in props.
5. If there is no title, the close button in the upper right corner will not be displayed. You can set the value of the close property to false. The method in the article is to bind the close button in the upper right corner with the title, which will not be displayed without the title
Show the close button in the upper right corner.
Expansion: for component encapsulation, it is for the reason that it can be reused. However, there will always be some small changes in the same window. For example, the buttons required by pop-up windows A and B have different colors. At this time, you can add styles to transfer the colors
Method, or pass different class names, make different button style definitions in sub components, and add specific comments, so you can create the same component without repetition.

Complete code

Parent component call:

<div>
   <Button type="primary" @click="modal3 = true">Encapsulate dialog components</Button>
  <md :modelVisible="modal3" 
  :title="''"
  :cancelText="''" 
  @on-close-cancel="closeModel"
  @on-open="openModel">
      <Button type="primary" @click="modal1 = true">Display dialog box</Button>
  </md>
</div>

Parent component script:

import md from '../../components/ModalDynamic';
export default {
    name: "",
    data() {
        return{
            modal3: false
        };
    },
    components:{
        md
    },
    methods: {
        closeModel() {
            console.log('Pop up window closed');
            this.modal3 = false
        },
        openModel(obj) {
            console.log('Pop up closes and returns pop-up data', obj);
            this.modal3 = false
        }
    }
}

Subcomponents:

<template>
    <div class="yu-dynamic-model">
        <Modal
            v-model="modelVisible"
            :width="width"
            :scrollable="true"
            :closable="closableRight"
            :ok-text="okText"
            :cancel-text="cancelText"
            :mask-closable="false">
            <slot />
            <div v-if="title" slot="header" class="model-header">
                <span>{{title}}</span>
            </div>
            <div slot="footer" class="model-footer">
                <Button v-if="cancelText" @click="cancel">{{ cancelText }}</Button>
                <Button v-if="okText" type="primary" @click="ok">{{ okText }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: "",
    props: {
        modelVisible: {
            type: Boolean,
            default: () => false
        },
        title: {
            type: String,
            default: ''
        },
        okText: {
            type: String,
            default: 'determine'
        },
        cancelText: {
            type: String,
            default: 'cancel'
        },
        width:{
            type: Number,
            default: 50
        }
    },
    data() {
        return{
            modelShow: this.modelVisible,
            closableRight: this.title ? true : false
        }
    },
    watch: {
        modelVisible: {
            handler: function(n, o){
                this.modelShow = n;
            }
        }
    },
    methods: {
        ok() {
            this.modelShow = false;
            this.$emit('on-open',false);
        },
        cancel() {
            this.modelShow = false;
            this.$emit('on-close-cancel', false);
        }
    }
}
</script>