父组件
<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>
网友评论