vue弹窗

[v-cloak]{display: none;}
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.25);
}
.dialog{
    width: 400px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate3d(-50%,-50%,0);
}

<div id="app" v-cloak>
    <button @click="flag=true">弹</button>
    <!--如果:show的值是true则显示，如果是false则隐藏（加:号show就是布尔类型），@close对应的函数是点击关闭按钮时触发的函数-->
    <modal :showw="flag" @close="()=>flag=false"></modal><!--val=>flag=false，一点就是为了触发这个函数，这个函数的目的就是让flag变为false，所以不写传参也可以-->
    <!--<modal :show="flag" @close="guanbi"></modal>-->
</div>
<template id="dialog">
    <div class="mask" v-show="showw">
        <div class="dialog">
            <button @click="shutdown">关闭</button><!--触发子的shutdown方法-->
        </div>
    </div>
    <!--写在这里都转成文档碎片了，不会在页面显示出来-->
</template>

let modal = {
    props:['showw'],//接收了父组件的属性
    template:`#dialog`,//像嵌套，等于把id里的元素都放在这里了
    methods:{//子传父
        shutdown(){
            this.$emit('close');//被触发后找到父的close方法并执行，发布 emit，子发布这个函数，让父去执行
        }
    }
};
let vm = new Vue({
    el:'#app',
    data:{  //放数据
        flag:false  //默认是关闭
    },
    components:{
        modal,  //名字不能叫dialog，原生中已经占用了这个名字
    },
//  methods:{
//      guanbi(){
//         this.flag=false;
//      }
//  },
23 });