效果

问题

1、用户在点击组件外的按钮可以控制dialog隐藏（外部源数据的显示与隐藏），但是内部的dialog控制该如何改变外部的data数值

2、如何嵌套dialog

思路

1、解决问题一可利用.sync修饰符解决

.sync是一个语法糖。是父组件监听子组件更新某个props的请求的缩写语法

使用修饰符后，内部使用$emit('update:propsName', value)即可同步更新外部的值

外部

 <ty-dialog title="提示" :visible.sync="visibleF" width="40%" :before-close="handlerClose" @open="open"
            @closeHandler="close">
            <span>全屏</span>
            <div class="btns" slot="footer">
                <ty-button @click="visibleF = false">取消</ty-button>
                <ty-button type="success" @click="visibleF = false">提交</ty-button>
            </div>
        </ty-dialog>

组件内

 // 关闭dialog
        close() {
            this.$emit('closeHandler')
            this.$emit('update:visible', false)
        },

2、问题二的解决可以嵌套的dialog插入到body中解决