doc---vue-cli脚手架项目问题总结（6）——vue的solt的使用

本文链接：https://blog.csdn.net/qq_38185872/article/details/105505578

本文总结了在Vue CLI搭建的项目中如何使用Slot进行内容分发，详细阐述了其工作原理和实践案例，帮助开发者更好地理解和运用Vue的插槽功能。

摘要由CSDN通过智能技术生成

##、使用vue的slot分发内容
页面内容

<!--对话框模版-->
<template id="dialogTemplate">
	<div class="reloadDiv" v-if="show_dialog">
		<div class="board fixed" @click="hide_dialog"></div>
		<div class="dialog fixed">
			<slot name="dialogContent"></slot>
			<slot name="dialogBtns">
				<span @click="hide_dialog">取消</span>
				<span @click="hide_dialog">确定</span>
			</slot>
		</div>
	</div>
</template>

<!--刷新对话框-->
<modal-dialog class="reloadDiv" :hide_dialog="hideDialog" :show_dialog="reload_dialog">
	<div class="dialog_content" slot="dialogContent">
		<img src="../../../Public/App/images/xiaohao@2x.png" width="60" />
		<p>刷新商品将消耗100臭币</p>
		<p>是否刷新？</p>
	</div>
	<div class="dialog_btns" slot="dialogBtns">
		<span @click="hideDialog">取消</span>
		<span @click="refresh">确定</span>
	</div>
</modal-dialog>

<!--信息填写对话框-->
<modal-dialog class="getMessageDiv" :hide_dialog="hideDialog" :show_dialog="message_dialog">
	<div class="dialog_content" slot="dialogContent">
		<p>请输入您的姓名和电话号码</p>
		<p><span>姓名：</span><input type="text" v-model="name"></p>
		<p><span>电话：</span><input type="tel" v-model="phone" maxlength="11"></p>
	</div>
	<div class="dialog_btns" slot="dialogBtns">
		<span @click="hideDialog">取消</span>
		<span @click="messageSure">确定</span>
	</div>
</modal-dialog>

Js中代码

Vue.component("modal-dialog", {
	props: ['show_dialog', 'hide_dialog'],
	template: "#dialogTemplate"
})