vue自己封装组件（通过具名插槽、组件传参 封装的一个属于自己的弹窗组件）

1. 首先，将自己想要封装的组件创建好。(使用插槽、组件传参来控制这个弹窗的显示和隐藏，以及弹窗的内容)

<template>
	<div id="qf-modal" v-if="visible">
		<!-- 封装一个弹窗的组件 -->
		<!-- 通过插槽来控制弹框展示的内容 -->
		<div class="mask">
			<div class="wrap">
				<!-- 具名插槽 -->
				<slot name="title">
					<!--在这个具名插槽中的内容为 具名插槽的默认值 当在父组件中没有该内容时，则使用这个默认的值-->
					<div class="title">
						警告
					</div>
				</slot>
				<slot name="body">
					<div class="body">
						你确定要购买吗
					</div>
				</slot>
				<div class="wrap__button">
					<button class="model__button--confirm" @click="confirm">确定</button>
					<button class="model__button--cancel" @click="cancel">取消</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	//1.需要一个属性，控制组件的显示和隐藏，接受一个visible属性来控制显示和隐藏
	//2.需要动态的接受title body button，如果没有传入的时候，采用默认的结构
	//3.点击确定或者是取消按钮的时候需要把模态框关掉，预留方法
	//方法名confirm点击确定的处理函数
	//方法名cancel点击取消的处理函数
	export default {
		data() {
			return {}
		},
		props: { //通过props来接受这个visible属性
			visible: { //表示对visible进行校验
				type: Boolean, //表示这个visible的类型要为布尔值
				default () { //表示默认值 
					return false //默认为false
				}
			}
		},
		methods: {
			// 将封装的组件中我们定义的两个方法，进行预留,通过$emit传递出去
			confirm() { //点击确定的操作
				this.$emit('confirm') 
			}, //表示将on-confirm发送出去 类似于发布事件
			cancel() { //点击取消的操作
				this.$emit('cancel')
			}
		}
	}
</script>
<style scoped>
	.mask {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.3);
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrap {
		width: 350px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 10px;
	}
	.wrap div {
		margin: 15px 0;
	}
	.model__button--confirm {
		margin: 0 5px;
		outline: none;
		border: 0;
		width: 150px;
		height: 30px;
		background: linear-gradient(90deg, #1596fb, pink);
		border-radius: 0.2847rem;
		display: block;
		color: #fff;
		cursor: pointer;
	}
	.model__button--cancel {
		outline: none;
		border: 0;
		width: 150px;
		height: 30px;
		background: linear-gradient(90deg, blue, green);
		border-radius: 0.2857rem;
		display: block;
		color: #fff;
		cursor: pointer;
	}
	.wrap__button {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

2. 在组件中，引入封装的组件，在页面上展示这个组件

<template>
	<div id="app">
		<!-- 通过按钮来控制封装的组件的展示和关闭 -->
		<button type="button" @click="open">打开</button>
		<!-- 展示封装的组件 -->
		<!-- 我们通过组件之间的传值，以及对插槽的运用，就可以实现我们对封装的组件的最大的使用 -->
		<modal :visible='isShow' @confirm='confirm' @cancel='cancel'>
			<template v-slot="title"> //此处的v-slot的名字要和我们在封装的组件中的插槽的名字一致
				<h1>自己定义的标题</h1> //如果此处不写内容，那么就是使用我们组件默认的内容
			</template>
			<template v-slot="body"> //此处的v-slot的名字要和我们在封装的组件中的插槽的名字一致
				自己定义的弹窗的内容  //如果此处不写内容，那么就是使用我们组件默认的内容
			</template>
		</modal>
	</div>
</template>

<script>
	import modal from './modal.vue' //引入封装的组件
	export default {
		name:'app',
		components:{ //将封装的组件注册成为自己的子组件
			modal
		},
		data(){
			return { 
				isShow:false
			}
		},
		methods:{
			open(){
				this.isShow = true
			}
			confirm(){
				console.log('打开弹框')
				this.isShow = true
			},
			cancel(){
				console.log('关闭弹窗')
				this.isShow = false
			}
		}
	}
</script>

<style>
</style>