动态组件和插槽

动态组件

// 动态组件: 实现了组件的占位
语法格式:
	<component :is="组件名"></component>
	//:is的值是哪个组件名,就在这个固定位置渲染这个组件内容

	eg:
		<button @click="fun('myDemo01')">火锅</button>
        <button @click="fun('myDemo02')">烤肉</button>
        <button @click="fun('myDemo03')">烧烤</button>
        <button @click="fun('myDemo04')">牛排</button>
        <component :is="组件名"></component>
		//会在这些按钮后面渲染这个组件中的内容

插槽

普通插槽

//插槽: 使封装的组件内容更加灵活,可以更换组建中某一位置内容
		(个人理解: 就是给封装的html代码在多个类似页面之间的某一位置传递不同参数,使之呈现不同内容)

语法格式:
	1.设置插槽:
		<template>
            <元素> 固定内容 </元素>
			<slot></slot>			//通过插槽插入的数据
			<元素> 固定内容 </元素>
			<元素> 固定内容 </元素>
			...
        </template>  
	2. 使用插槽:
		<div id=#app>
        	<组件名>
                <元素> 插入的内容 </元素>
				//可以是任意代码,固定内容直接传递,只需要在组件名中写插入的内容即可
			</组件名>
		</div>

具名插槽

// 有名字的插槽
	语法格式:
		1. 设置插槽:
			<template>
            	<元素> 固定内容 </元素>
				<slot name="插槽名"></slot>		//通过插槽插入的数据
				<元素> 固定内容 </元素>
				...
        	</template>  
		2. 使用插槽:
			<div id=#app>
        		<组件名>
                	<元素 slot="插槽名"> 插入的内容 </元素>
				</组件名>
			</div>