VUE中 父子组件数据传递

父组件

<template>
    <modal :showModal="showModal" @close="closeModal">      // 将模态窗的显示隐藏的状态传递给子组件
        <p slot="message">您还没有登录</p>
        <span slot="btn">好的</span>
    </modal>
    <div class="btn-area">
        <a class="btn btn--m" @click="addCar" >加入购物车</a>
    </div>
</template>

<script>
    export default{
        showModal:false,
        methods:{
            closeModal(){
                this.showModal = false;
            },
            addCar(){
                this.showModal = true;
            },
        }
    }
</script>

子组件

<template>
    <div class="modal-wrap" v-show="showModal" @click="closeModal">
        <slot name="message"></slot>
        <div>
            <slot name="btn"></slot>
        </div>
    </div>
</template>

<script>
  import { MessageBox } from 'element-ui';
  export default {
    props:[
      'showModal'
    ],
    methods: {
      closeModal(){
        this.$emit('close');
      }
    }
  }
</script>