slot介绍

感谢博主启发 https://segmentfault.com/a/1190000012996217

1、作用

• 插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性

2、使用

• 单个插槽 | 默认插槽 | 匿名插槽（该节点不携带任何其他特征信息）
  • 父组件提供样式和内容

      //子组件模板
      <div>
          <h2>我是子组件的标题</h2>
      	//这里插入父组件在引用子组件内部的内容
          <slot></slot>   
      </div>
      //父组件模板
      <div>
          <h1>我是父组件的标题</h1>
          <my-component>
              <p>这是一些初始内容</p>
              <p>这是更多的初始内容</p>
          </my-component>
      </div>
      //渲染结果
      <div>
          <h1>我是父组件的标题</h1>
          <div>
              <h2>我是子组件的标题</h2>
              <p>这是一些初始内容</p>
              <p>这是更多的初始内容</p>
          </div>
      </div>

• 具名插槽
  • 为模板中不同部分指定相应的插入位置，当部分内容没有找到对应的插入位置时，就会依次插入匿名的slot中，当没有找到匿名slot时，这段内容就会被抛弃掉
  • 父组件提供样式和内容

      //子组件模板
      <div>
          <slot name="header"></slot>
          <slot name="footer"></slot>
          <slot></slot>
      </div>
      //父组件模板
      <my-component>
          <p>Lack of anonymous slot, this paragraph will not shown.</p> 	  
          <p slot="footer">Here comes the footer content</p> 
          <p slot="header">Here comes the header content</p>
      </my-component>
      //渲染结果
      <div>
          <p>Here comes the header content</p>
          <p>Here comes the footer content</p> 
          <p>Lack of anonymous slot, this paragraph will not shown.</p>
      </div>

• 作用域插槽 | 带数据的插槽
  • 父组件提供样式，子组件提供内容

      //子组件
      <slot name="up" :data="data"></slot>
       export default {
          data: function(){
            return {
              data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
            }  
          },
      }
      //父组件
      <template>
        <div class="father">
          <h3>这里是父组件</h3>
          <!--第一次使用：用flex展示数据-->
          <child>
            <template slot-scope="user">
              <div class="tmpl">
                <span v-for="item in user.data">{{item}}</span>
              </div>
            </template>
      
          </child>
      
          <!--第二次使用：用列表展示数据-->
          <child>
            <template slot-scope="user">
              <ul>
                <li v-for="item in user.data">{{item}}</li>
              </ul>
            </template>
      
          </child>
      
          <!--第三次使用：直接显示数据-->
          <child>
            <template slot-scope="user">
             {{user.data}}
            </template>
      
          </child>
      
          <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
          <child>
            我就是模板
          </child>
        </div>
      </template>