vue插槽的简单运用

关于vue插槽有感

今天带着重感冒，大致掠了一下vue插槽以及其在页面中的使用，突然手痒就试了一下。
首先之前看官网给的关于插槽的介绍含糊不清，总感觉似懂非懂，也能用，但就是还是有时候不清不楚，下面介绍下自己对插槽的初步认识，以后会随着项目的纵深加深认识，并逐渐补订正。
我们都知道vue项目中最亮的地方就是组件的使用了。组件可以多次复用，只需封装一个组件，然后再用的时候驼峰引入components即可。这样就可以让我们的页面会省很大的空间，并且在写代码的时候也很爽有木有。不再像过往其他框架或者原生的时候磕磕绊绊。
废话不多说，那么插槽在里面到底是干啥的，首先插槽可以放好多东西，几乎任何内容都可以当做插槽使用，包括组件标签模块等等，就像其语义一样，类似于在一个页面或者组件中插入一个你想插入的任何内容，那么怎么使用它呢？首先我们不要把插槽想的多复杂，当你明白的时候你会，我靠怎么这么强大，记得一定不要手懒，虽然我有时候手也经常不动。举个简单例子如下
定义一个vue组件，初始为空：

<template>
  <div>
  </div>
</template>

假如我们想在里面引入组件怎么引入,名字瞎取的

 components: { directireModule：()=>import ('@/组件路径') }

引完之后我们调用

 *<template>
  <div>
  		<directire-module></directire-module>
  </div>
</template>*

那么此时即可使用定义组件，那么假如我们想在组件之间写入内容发现页面不显示即：

<template>
  <div>
  		<directire-module>为什么我不显示</directire-module>
  </div>
</template>

此时就需要使用插槽了那么就需要在你定义的组件directireModule中先声明，你所定义的那个组件在使用的时候需要有插入内容的地方。我觉得上一句是关键，即在directireModule内部的template内部声明如下：

<template>
  	<div>
    	<p>directireModule组件</p>
    	<slot></slot>//引用该组件时需要放置内容的插槽声明
	</div>
</template>

只要这样就可以了，那么我们又会想，插槽怎么可能有一个，那样也太鸡肋了，是的我们可以再组件内部声明多个插槽，也叫具名插槽如下：

<template>
  <div>
   <p>directireModule组件</p>
    <slot name="top"></slot>
    <slot></slot>/引用该组件时需要放置内容的插槽声明
    <slot name="foots"></slot>
  </div>
</template>

带有名字的插槽会与调用该组件时一一对应我们都知道我们最初在使用该组件的时候的代码如下：

<template>
  <div>
  		<directire-module>为什么我不显示</directire-module>
  </div>
</template>

那么在使用具名插槽时怎么去使用呢

<template>
  <div>
  		<directire-module>
	  		<l-header slot="top"></l-header>
	      	<p>container默认插槽</p>
	      	<h4 slot="foots">我是h4</h4>
		</directire-module>
  </div>
</template>

我们看到调用插槽的可以使标签也可以是组件，是不是觉得很强大，而且还有我们可以在被当做组件的插槽中再次调用插槽，且插槽也可以复用只需要slot的属性值与所定义组件的slot标签中的name值一样即可今天就简单介绍下插槽的使用，真正的掌握还得需要个人不断的练习才有收获，纸上得来终觉浅，如有遗漏错误欢迎指正。第一次写多多指教。