vue自主学习总结，插槽的使用2

vue学习

vue插槽slot的学习

上节我们讲了默认的插槽，这节我们来讲具名插槽。
当我们在引用child子组件时，我们可以在标签中加入自定义个内容，通过在子组件中加入slot来使child标签中的内容得到渲染，但这又一个弊端，也就是我在引用的child组件标签中添加的所有自定义内容，统统在这一个标签中显示，但假如我自定的内容，想要部分显示在头部，部分显示在尾部，又要如何去处理呢？当然，只要你想，那便有办法实现。
具名插槽，顾名思义便是有名字的插槽，也就是说，用名字来区分插槽，怎么样，说到这里是否有了些许思路。==》 我们在子组件中多定义几个slot 并起不同的名字不就行了吗？
话不多说，上代码：

//child 的模板
<template>
	<div class="container">
		//名为header的插槽，父组件自定义内容时，引用slot="header" 那么所有的内容就会在这里显示
	    <slot name="header"></slot>
	    //没有调用插槽的内容，将全部显示在这里，也即是默认插槽
	    <slot></slot>
	    // 当然，这里就是footer咯
	    <slot name="footer"></slot>
	</div>
</template>

//父组件引用child
<child>
	//不客气了，我先来，我用header这个插槽啊
	<template  slot="header">
		既然我用了header这个插槽，那我在渲染的时候将显示在顶部啊
	</template>
	//我是footer为了证明我的位置是根据子组件插槽位置来定的，我先来了，但我依然会显示在底部
	//同时为了证明我不一定非要用template模板，那我就不用啦
	<p slot="footer">
		我是footer啊，虽然我在自定义的时候位置靠上，但子组件footer插槽在最下面，所以我会显示在底部啊
	</p>
	//再然后就是默认的啦，有些内容，不需要用具名插槽控制位置啊，只要显示就行啦
	<h1>haha,我将显示在默认插槽中哦</h1>
	<h2>同样的我也在默认插槽中</h2>
</child>

差不多了，就这些，够通俗易懂吧，下节我们讲作用域插槽。