vue电商实战学习笔记（第六章续3）——弹出对话框组件

1.首先在compoents文件夹下新建一个dialog.vue文件

2.在layout.vue文件中引入dialog.vue组件，同时加入自定义组件名

dialog.vue和layout.vue是父子组件关系，可以利用父子组件来进行通信

当父组件点击“登录”时，向子组件传递信息，让其显示，首先先来实现子组件，先设定传递参数类型，同时绑定子组件上的一个

属性：

<template>
  <div>
    <div class="dialog-wrap" v-if="isShow">
      <div class="dialog-cover"></div>
      <div class="dialog-content">
       <p class="dialog-close">x</p>
        <slot>empty</slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    props:{ //设置传递的类型和默认值
      isShow:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return{
      }
    }
  }
</script>

在父组件中：

 <my-dialog :is-show="isShowDialog"></my-dialog> //绑定子组件的is-show属性，
//注意要与子组件的对应

通过父组件向子组件传递参数：

<script>
  import myDialog from '../components/dialog.vue'
  export default{
    components:{
      myDialog
    },
    data(){
      return{
        isShowDialog:false//开始时弹窗关闭
      }
    },
    methods:{
      aboutClick(){
        this.isShowDialog=true;//弹窗打开
      }
    }
  }
</script>

这样就能实现弹窗效果了！

当要关闭弹窗时，可以通过两种方式：一种时点击"X"按钮，一种是点击遮罩关闭，不管哪种，也是通过父子组件的通信来实现，

当子组件发出关闭的信息时，通过emit来通知父组件：

子组件的写法：

<template>
  <div>
    <div class="dialog-wrap" v-if="isShow">
      <div class="dialog-cover" @click="closeMyself"></div>
      <div class="dialog-content">
       <p class="dialog-close" @click="closeMyself">x</p>
        <slot>empty</slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    props:{
      isShow:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return{
      }
    },
    methods:{
      closeMyself(){
        this.$emit('on-change');
      }
    }
  }

父组件的写法：

<template>
  <div>
    <div class="app-head">
      <div class="app-head-inner">
        <router-link :to="{path:'/'}">
          <img src="../assets/logo.png"/>
        </router-link>
        <div class="head-nav">
          <ul class="nav-list">
            <li class="nav-pile">|</li>
            <li>退出</li>
            <li>登录</li>
            <li class="nav-pile">|</li>
            <li>注册</li>
            <li class="nav-pile">|</li>
            <li @click="aboutClick()">关于</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <router-view></router-view>
    </div>
    <div class="app-foot">
      <p>© 2016 fishenal MIT</p>
    </div>
    <my-dialog :is-show="isShowDialog" @on-close="closeDialog"></my-dialog>
  </div>
</template>
<script>
  import myDialog from '../components/dialog.vue'
  export default{
    components:{
      myDialog
    },
    data(){
      return{
        isShowDialog:false
      }
    },
    methods:{
      aboutClick(){
        this.isShowDialog=true;
      },
      closeDialog(){
        this.isShowDialog=false;
      }
    }
  }
</script>

这样就是实现了关闭效果！