

 <!DOCTYPE html><html lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>restful - vue2入门与提高视频教程 </title>
 
 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet">

<script src="vue.js" type="text/javascript"></script>
 

</head>
<body  >
 
 
<div id="app">



<button @click="open">open</button>
 
 

<modal :openmodal="modalclass" @closemodal="close($event)"></modal>

<p>{{ childv }}</p>
 </div>

 <script>

 Vue.component('modal', {

     props:['openmodal'],
      template: '<div :class="openmodal">modal...<button v-on:click="close">close</button>  {{ openmodal }}</div>',
    
     methods:{
           close:function(){
              this.$emit('closemodal','aaaaaaaa')
           }
        }
 
})
 
 
 

var vm = new Vue({ 

    el:'#app',
    data:{

      modalclass:'dn',
      childv:''
    },
    methods:{
      open:function(){

           this.modalclass='db';
      },
       close:function(a){

           this.modalclass='dn';
           this.childv=a;
      }

    } 

})
 </script>

 <style>
    .dn {display:none;}
    .db {display:block;}
 </style>
</body>
</html>
 
 


