vue 插槽(slot)的使用方法

vue的slot主要分三種：默認插槽，具名插槽，作用域插槽

使用插槽是在存在父子關系的組件，可以在子組件中決定插槽的位置，同時子組件也可以給這些插槽的默認信息，當父組件中沒有需要給子組件插槽插入信息時，顯示的是子組件插槽定義的默認信息。

默認插槽的使用：

//  默認插槽<slot></slot>
// 子組件定義一個默認插槽

<template>
    <div>
        <div class="testSolt">
            <p class="title">普通插槽</p>
            <slot>默認的信息</slot>
        </div>
        <!-- 可以在子組件中定義多個默認插槽，並設置插槽的位置，父組件要插入的內容都會被填充到這些默認插槽中 -->
        <div style="margin-top:300px;background:#fff;height:100px;color:blue;">
            <slot>默認插槽的信息2</slot>
        </div>
    </div>
</template>

// 父組件引入並使用這個插槽

<template>
    <div>
        <children>
          <!-- 只要子組件中定義了slot，這里就可以通過p 標簽將內容傳給子組件並顯示（子組件的slot 標簽消失，父組件的p標簽替換slot） -->
          <p>我是要顯示的插槽信息</p>
        </children>
    </div>
</template>

<script>
import Children from "./children"
</script>

 

 

 具名插槽的使用：vue 2.6.0 版本使用具名插槽和作用域插槽有了新的統一語法，使用v-slot替換了之前的slot和slot-scope

 具名插槽就是在子組件中定義插槽時，給對應的插槽分別起個名字，方便后邊插入父組件將內容根據name來填充對應的內容。

// 具名插槽<slot name="名稱"></slot>
// 子組件中定義

<template>
    <div>
        <div class="testSolt">
            <p class="title">具名插槽</p>
            <!-- 給插槽加name 屬性，就是所謂的具名插槽 -->
            <slot name="one"></slot>
            <slot name="two"></slot>
        </div> 
        <!-- 子組件也可以同時定義多個具名插槽 -->
        <div style="margin-top:300px;background:#fff;height:100px;color:blue;">
           <slot name="two"></slot>
        </div>
    </div> 
</template>

// 父組件引入並使用這個插槽

<template>
    <div>
        <children>
          <!-- 插槽里面同時可以插入一個組件 或者字符串內容等都可以 -->
          <template v-slot:one>
            <echarts/>
          </template>
          <template v-slot:two>
            我是要給two 插槽的信息
          </template>
        </children>
    </div>
</template>

<script>
import Children from "./children"
import Echarts from "./echarts"
</script>

 

 

 作用域插槽的使用：

上邊默認插槽和具名插槽基本都是父組件中決定要插入到子組件中的內容，子組件自行決定插槽的位置。具名插槽，就是實現在子組件中自行決定自己要顯示什么內容。

// 作用域插槽<slot :自定義name=data中的屬性或對象></slot>
// 子組件定義

<template>
    <div>
        <div class="testSolt">
            <p class="title">作用域插槽</p>
            <!-- 子組件中告訴父組件，要實現obj里的信息 -->
            <slot :obj="obj">默認信息</slot>
        </div> 
    </div> 
</template>

<script>
export default{
   name:'children',
   data(){
     return{
       obj:{
         msg:'我是msg',
         messge:'我是message'
       }
     }
   }
}
</script>

// 父組件中使用
// 如果子組件中只有一個作用域插槽時，父組件可以使用下邊這種簡單的寫法，規范還是要加上template模板標簽

<template>
    <div>
        <children v-slot="slotProps">
          <!-- 插槽里面同時可以插入一個組件 或者字符串內容等都可以 -->
          <!-- <template v-slot="slotProps"> -->
            <p>{{slotProps.obj.msg}}---{{slotProps.obj.message}}</p>
          <!-- </template> -->
        </children>
    </div>
</template>

<script>
import Children from "./children"
</script>

 

 當子組件中有多個作用域插槽時:

// 子組件定義

<template>
    <div>
        <div class="testSolt">
            <p class="title">作用域插槽1</p>
            <slot :obj="obj">默認信息</slot>
        </div> 
        <div class=""testSolt>
           <p class="title">作用域插槽2</p>
           <slot :obj="obj2"></slot>
        </div>
    </div> 
</template>

<script>
export default{
   name:'children',
   data(){
     return{
       obj:{
         msg:'我是msg',
         messge:'我是message'
       },

       obj2:{
         msg:'我是作用域插槽2的msg',
         messge:'我是作用域插槽2的message'
       }
     }

   }
}
</script>

// 父組件使用

<template>
    <div>
        <children>
          <template v-slot:default="slotProps"> 
            <p>{{slotProps.obj.msg}}---{{slotProps.obj.message}}</p>
          </template>
          <template v-slot:other="slotProps">
 <p>{{slotProps.obj2.msg}}---{{slotProps.obj2.message}}</p>
 </template>
 </children>
 </div>

</template> <script> import Children from "./children"
</script>