浅谈 Vue 插槽

背景：

<child></child> //child是一个组件

如上，我们都知道组件的引用就跟常规标签一样。但是组件标签并不能进行如下操作：

<child>
	<p>我是一个组件！</p>
</child>

如果在创建组件时没有使用<slot>插槽，‘<p>我是一个组件！</p>’这句将不会渲染。因为默认情况下，父组件在子组件内套的内容，是不显示的。

什么是 <slot>插槽？

首先我们来讲解一下模板的分类：
从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类：
非插槽模板指的是html模板，比如’div，span，ul，table’这些，非插槽模板的显示与隐藏以及怎样显示由组件自身控制;
插槽模板是狭槽，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的HTML模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定，插槽写在子组件模板的什么位置，父组件传过来的模板将来就显示在什么位置。

而<slot>插槽就属于插槽模板。

<slot>插槽的特点：

1、由父组件控制显示隐藏以及显示的html模板；
2、自组件决定显示的位置，<slot>在组件模板的什么位置，父组件传过来的模板将来就显示在什么位置

<slot>插槽分类：

1. 单个<slot>插槽/默认插槽/匿名插槽

   单个<slot>插槽又叫默认<slot>插槽、匿名<slot>插槽，可以放在组件的任意地方，但只能有一个。

父组件：

<template>
	    <div class="father">
	        <h3>这里是父组件</h3>
	        <child>
	            <div>
	              <span>插入的内容</span>
	            </div>
	        </child>
	    </div>
	</template>

	子组件：
	<template>
	    <div class="child">
	        <h3>这里是子组件</h3>
	        <slot></slot>
	    </div>
	</template>

渲染的结果：

<div class="father">
     <h3>这里是父组件</h3>
  <div class="child">
      <h3>这里是子组件</h3>
      <div>
          <span>插入的内容</span>
      </div>
  </div>
 </div>

由上面可知，<slot>被替代了。

2. 具名<slot>插槽

具名<slot>插槽与单个<slot>插槽不同，增加了名称属性。因为有了名称属性的区别，可以出现多次，出现的位置自定。

父组件：

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
          <span slot='first'>具名插槽一的插入的内容</span>
		<span slot='second'>具名插槽二插入的内容</span>
		<span>匿名<slot>插槽的插入的内容</span>
        </child>
    </div>
</template>

子组件：

<template>
    <div class="child">
        <h3>这里是子组件</h3>
            <slot name='second'></slot>
		    M
		<slot name='first'></slot>
    </div>
</template>

渲染的结果：

  <div class="father">
        <h3>这里是父组件</h3>
	    <div class="child">
	            <h3>这里是子组件</h3>
			<span>具名插槽二插入的内容</span>
			<span>匿名<slot>插槽的插入的内容</span>
			<span>具名插槽一的插入的内容</span>
	    </div>
    </div>

3. 作用域插槽

   通俗的将就是让插槽带数据。父组件用属性 slot-scope="date"获取数据，子组件用:data="date"暴露数据。

父组件：

<template>
	    <div class="father">
	        <h3>这里是父组件</h3>
	        <child>
	          <span slot='first' slot-scope="msg">{{ msg.data }}</span>
		      </child>
	    </div>
	</template>

子组件：

<template>
    <div class="child">
        <h3>这里是子组件</h3>
         <slot name='first'  :data="msg"></slot>
    </div>
</template>

 export default {
    data: function(){
      return {
        msg: '我是作用域插槽！！'
      }
    }
}

渲染的结果：

 		<div class="father">
	        <h3>这里是父组件</h3>
		    <div class="child">
		            <h3>这里是子组件</h3>
				<span>具名插槽二插入的内容</span>
		    </div>
	    </div>

4. 带默认值的<slot>插槽

   <slot>里可以事先放入DOM,当该<slot>没有被使用时，事先放入的DOM将显示出来。

父组件：

<template>
	    <div class="father">
	        <h3>这里是父组件</h3>
	        <child></child>
	    </div>
	</template>

子组件：

<template>
    <div class="child">
        <h3>这里是子组件</h3>
            <slot><span>我是默认的DOM！！</span></slot>
    </div>
</template>

渲染的结果：

<div class="father">
        <h3>这里是父组件</h3>
	    <div class="child">
	            <h3>这里是子组件</h3>
			<span>我是默认的DOM！！</span>
	    </div>
    </div>