Vue中插槽的使用

Vue中插槽的使用

• 一、为什么要使用插槽：

  • 使用插槽的目的在于，使组件更具有扩展性。
  • 例如，组件中的一个地方，默认情况下为botton，而在使用的时候，我们有需求需扩展成span、input等，这时候我们就要用到插槽。并且我们可以将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。

• 二、插槽是vue中的内容分发机制，slot又分三类：默认插槽、具名插槽、作用域插槽。

• 三、slot插槽的使用：

  • 子组件预留slot位置，父组件在使用子组件时，在子组件标签中定义的内容，将渲染在slot的位置处；如不定义，则不显示插槽。

  • 1、默认插槽

    • 默认插槽，又名匿名插槽，不用设置名称属性，单个插槽可以放置在组件的任意位置，一个组件只能有一个默认插槽。

    • //子组将中
      <template>
          <div>
              <h2>子组件 插槽使用</h2>
      	//在子组件中为插槽预留位置
              <slot></slot>    
      	
              //默认内容，插槽还可以使用默认内容，在不传递值时显示默认内容的值
      	<solt>默认内容</solt> 
          </div>
      </template>
      
      
      //父组将中使用
      import Slotdemo from "./soltDemo.vue";
      components: {Slotdemo},
          
      <template>
          <div>
              <!-- 插槽使用 -->
              <Slotdemo>
                  <div class="solt">
                      <div>
                          <el-input placeholder="请输入内容"></el-input>
                      </div>
                  </div>
              </Slotdemo>
          </div>
      </template>
      

  • 2、具名插槽

    • 当子组件功能复杂时，子组件的插槽可能并非一个，这个时候就需要给slot指定一个name属性，也就是具名插槽。

    • //子组件中
      <template>
          <div>
              <!-- 具名插槽 -->
              <slot name="title">
                  title具名插槽默认内容
              </slot>
              <div>
                  <slot name="count">
                      count具名插槽默认内容
                  </slot>
              </div>
          </div>
      </template>
      
      
      //父组件中使用
               import Slotdemo from "./soltDemo.vue";
      	 components: {Slotdemo},
              <!-- 具名插槽使用 -->
              <!-- 注意：具名插槽一定要在外面包裹一层 template 并在其上面使用  v-solt=" " 属性来指定插槽名称-->
              <Slotdemo>
                   
                  <template v-solt="title">     
                      <div>title具名插槽 向名字为title的插槽插入内容</div>
                  </template>
      
                  <template v-solt="count">
                      <div>count具名插槽 向名字为count的插槽插入内容</div>
                  </template>
              </Slotdemo>
      

  • 3、作用域插槽

    • 我们可以将其叫做带数据的插槽，父组件在使用的时候可以替换slot插槽中的显示页面结构，但展示的数据还是来源于子组件。

    • 当数据在子组件中，但是插槽中渲染数据的节点由父组件决定，这种情况下，就需要使用作用域插槽。

    • //子组件中使用 solt 插槽将数据 传递至父组件
      
      <template>
          <div>
              <slot :list="list"></slot>
          </div>
      </template>
      <script>
      export default {
          data() {
              return {
                  list: ['张三', '李四', '王五']
              }
          },
      }
      </script>
      
      
      //父组件中使用作用域插槽
      	import Slotdemo from "./soltDemo.vue";
      	components: {Slotdemo},
              
              <!-- 作用域插槽 -->
              <!-- 作用域插槽的使用必须要在子组件标签上面使用v-slo 获取到作用域插槽在子组件中的值再在后续中使用 -->
              <Slotdemo v-slot="{ list }">
                  <!-- 作用域插槽 -->
                  <ol>
                      <li v-for="item in list" :key="item.id">
                          {{item.count}}
                      </li>
                  </ol>
              </Slotdemo>
      

• 四、插槽后备内容

  • 每一个 <slot> 都可以设置默认值，当外部没有给插槽传递内容时，插槽就可以使用自己的默认值：

  • 注意：当有值传递时，插槽的默认值也会显示出来

  • <template>
        <div>
            <!-- 插槽 -->
            <slot><h2>默认内容</h2></slot>
            <h2>子组件</h2>
        </div>
    </template>