vue 插槽 - 爱码网

1.插槽
	1.1 单个插槽 
	1.2 具名插槽
	1.3作用域插槽:数据是子传父
		注意：在2.5.0之前，必须使用到template身上
2.动态组件
	2.1 keep-alive
	什么情况下使用缓存：

1.1（单个插槽）`父组件

<div class="parent">
	<Child>   //
			//父组件
			<p >我是插槽1</p>
			<p  >我是插槽2</p>
	</Child>
</div>

子组件

<div class="child">
		//子组件
		<slot ></slot>
	</div>`

效果图
vue 插槽
在父组件引入子组件的地方中加入你所需要的内容，在子组件中的
标签内便可将组件的内容引入到特定的位置。另外，样式在父组件，子组件中都可以写，但父组件的样式会被子组件覆盖

1.2 具名插槽
父组件

	<div class="parent">
		父组件
		<Child>
			<div slot="s1">
				<p >我是插槽1</p>
				<p >我是插槽11</p>
			</div>
			<p slot="s2"> 我是插槽2 </p>
		</Child>
	</div>

子组件

	<div class="child">
		子组件
		<slot name="s1" ></slot>
		<hr/>
		<slot name="s2"></slot>
	</div>

效果图
vue 插槽

在父组件中用slot标记，在子组件name 标记需要插入的地方。多个元素插入，用div包起来即可。

1.3作用域插槽
父组件

	<div class="parent">
		父组件
			 <Child>
			<div slot="s1">
				<p>我是插槽1</p>
				<p >我是插槽11</p>
			</div>
			<template slot="s2" slot-scope="key" >
				<p >{{ key.text }}</p>
				
			</template>
		</Child> 
	</div>

子组件

	<div class="child">
		子组件
	 <slot name="s1"></slot>
		<hr />
		<slot name="s2" text="我是数据传递"></slot> 
	</div>

vue使用slot-scope来使子组件传递数据给父组件。绑定的key类似将子组件的所有数据汇聚在此，通过key.text来获取数据