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 contentp> 
          <p slot="header">Here comes the header contentp>
      my-component>
      //渲染结果
      <div>
          <p>Here comes the header contentp>
          <p>Here comes the footer contentp> 
          <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>
          
          <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>