vue的通讯与传递props emit (简单的弹框组件)

props父把信息传递给子组件

 1父组件 
  <template>
   <div class="hello">
      <div id="app-3" v-on:click="show">
         点击显示隐藏
        <p v-if="seen">现在可以看到我了</p>
      </div>
      <div class="app-4">
       <ol>
         <tab v-for="item in groceryList" v-bind:todo="item">
　　　　　　　　<!--:todo-->
         </tab>
       </ol>
      </div>
      <div class="app-5">
        <p>{{message}}</p>
        <input v-model="message">
        <button v-on:click="reverse">逆转信息</button>
      </div>
   </div>

 </template>

 <script>
 import Tab from '@/components/tab/tab'
 export default {
   name: 'hello',
   components:{Tab},
   data () {
     return {
       message:'Hello Vue!',
       seen:true,
       todos:[
         {text:'学习javascript'},
         {text:'学习Vue'}
       ],
       groceryList: [
         { id: 0, text: '蔬菜' },
         { id: 1, text: '奶酪' },
         { id: 2, text: '随便其他什么人吃的东西' }
       ]
     }
   },
   methods:{
     show(){
       this.seen=!this.seen;
     },
     reverse(){
       this.message=this.message.split('').reverse().join('');
     }
   }
 }
 </script>

 <style scoped>
 h1, h2 {
   font-weight: normal;
 }

 ul {
   list-style-type: none;
   padding: 0;
 }

 li {
   display: inline-block;
   margin: 0 10px;
 }

 a {
   color: #42b983;
 }
 </style>
　　/****
　　******
　　*******
　　**********
　　*********/
　子组件

 <template>
     <li>{{todo.id}}{{todo.text}}</li>
 </template>
 <script>
 export default{
     props:['todo'],/*通过这个把数据传过来*/
     data(){
         return{

         }
     },
     methods:{

     }
 }
 </script>

子组件传值给父元素

 只展示重要代码
 子组件
 this.$emit('changeLocale',locale);
 父组件
 <v-header @changeLocale="paLocale"></v-header>
 方法
 paLocale(evtValue){
    //evtValue表示子组件传递过来的locale值
 },

简单的 弹窗组件编写

//父组件
<template>
    <div class="parent">
        <button @click="showModal">按钮</button>
        <child v-if="showModel" header-title="温馨提示"  @close="showModel = false" @closeModel="closeModel">
            <div slot="body">
                <p>你是傻逼吗?</p>
                <p>你是！</p>
            </div>
        </child>
    </div>
</template>
<script>
import child from '@/components/sub/child'
export default{
    components:{child},
    data(){
        return{
            showModel:false
        }
    },
    methods:{
        showModal(){
            this.showModel=true
        },
        closeModel(){
            this.showModel=false
        }
    }
}
</script>
<style>

</style>
//子组件
<template>
    <transition name="model">
        <div class="model" >
            <div class="model-mask" @click="close"></div>
            <div class="modal-wrapper">
                <div class="modal-header">
          <slot name="header">
            {{headerTitle}}
          </slot>
        </div>

        <div class="modal-body">
          <slot name="body">
            default body
          </slot>
        </div>

        <div class="modal-footer">
          <slot name="footer">

            <button class="modal-default-button" @click="close">
              OK
            </button>
          </slot>
        </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default{
    props:['headerTitle'],
    methods:{
        close(){
            this.$emit('closeModel');
        }
    }
}
</script>
<style scoped>
.model{
    position: fixed;
  z-index: 96;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.model-mask{
    position: fixed;
  z-index: 97;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s ease;
}
.modal-wrapper{
    position: relative;
    width:80%;
  height: auto;
  margin: 0 auto;
  margin-top: 100px;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  z-index:98;
}
.model-enter-active, .model-leave-active{
    transition: opacity .5s;
    opacity:1;
}
.model-enter, .model-leave-to {
    opacity: 0
}
</style>