05 slot 插槽

一、slot插槽介绍
1、如果你想在标签组件内展示其他内容。这个时候你就需要使用插槽
slot插槽特点：
1、如果组件内没有内容就不会显示
2、如果有内容，就直接展示在有插槽slot组件的位置
子组件：one.vue:

<template>
    <div class="slotBox">
        <h4>this is one</h4>
        <!-- 
            匿名插槽：
            1、如果没有内容，就不展示
            2、如果有内容，就直接展示在slot所在的位置
         -->
         <slot></slot>
    </div>
</template>

父组件：slot.vue

<template>
    <div>
        <h2>slot</h2>
        <!-- 有内容就在vone组件的slot位置内显示 -->
        <vone>
            <h2>我真厉害，在组件内显示内容</h2>
        </vone>
        <!-- 没有内容就不显示 -->
        <vone></vone>
     <!-- 有内容就在vone组件的slot位置内显示 -->
      <vone>
          <div>天道酬勤</div>
          <div>人道酬善</div>
          <div>商道酬信</div>
      </vone>
 </div>
</template>

//指定组件的显示位置
子组件 two.vue

<template>
    <div class="twoBox">
        <h4>this is two</h4>
        <!-- 
            匿名插槽：
            1、如果没有内容，就不展示
            2、如果有内容，就直接展示在slot所在的位置
         -->
          <!-- 具名插槽：如果内容要放进来，必须指定插槽名称 -->
         <slot name="one"></slot>
          <slot name="two"></slot>
    </div>
</template>

父组件：slot.vue

        <!-- 如果插槽带有name 属性，内容不指定插槽，就无法显示在带有指定name的插槽中 -->
<template>
    <div>
        <vtwo>
            <ul slot="one">
                <li>我已经成仙</li>
                <li>我已经成仙</li>
            </ul>
        </vtwo>
          <vtwo>
              <ol slot="two">
                  <li>快乐西天</li>
                  <li>快乐西天</li>
              </ol>
          </vtwo>
            <vtwo>
 <h5>这个不指定插槽，就无法显示在带有指定name的插槽中</h5>
            </vtwo>
    </div>
</template>