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;
   100%;
  height: 100%;
}
.model-mask{
    position: fixed;
  z-index: 97;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s ease;
}
.modal-wrapper{
    position: relative;
    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>