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);
}

 1 <div id="app" v-cloak>
 2     <button @click="flag=true">弹</button>
 3     <!--若是:show的值是true则显示，若是是false则隐藏（加:号show就是布尔类型），@close对应的函数是点击关闭按钮时触发的函数-->
 4     <modal :showw="flag" @close="()=>flag=false"></modal><!--val=>flag=false，一点就是为了触发这个函数，这个函数的目的就是让flag变为false，因此不写传参也能够-->
 5     <!--<modal :show="flag" @close="guanbi"></modal>-->
 6 </div>
 7 <template id="dialog">
 8     <div class="mask" v-show="showw">
 9         <div class="dialog">
10             <button @click="shutdown">关闭</button><!--触发子的shutdown方法-->
11         </div>
12     </div>
13     <!--写在这里都转成文档碎片了，不会在页面显示出来-->
14 </template>

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