大白話vue——slot的做用與使用

這篇內容原本是不打算放在首頁上的，由於內容實在是比較簡單，可是在查找slot的使用講解時發現相關的講解比較少，要麼像官方文檔同樣簡單講解（看過任然一臉懵逼），也許是本身理解能力比較差...因此在此講述記錄吧

言歸正傳，且看正文講解

在看官網對slot的解釋中，出現次數最多的是「插槽」，若是想象成物體，也就是說slot是一個能夠插入的槽口，好比插座的插孔。那麼slot的做用是什麼呢？

先來看下面的例子

//slot組件
<template>
  <div class="slots">
      slot的用法
      <SlotChild>
          <div class="no-name">我是嵌在子組件內不具備屬性名的標籤</div>
      </SlotChild>
  </div>
</template>

<script>
import SlotChild from 'component/slotChild'
export default {
    name: 'slots',
    components:{
        SlotChild
    },
    data () {
        return {
      
        }
    }
}
</script>

//slot的子組件
<template>
  <div class="slot-child">
      我是slot的子組件
  </div>
</template>

<script>
export default {
  name: 'slotChild',
  data () {
    return {
      
    }
  }
}
</script>

頁面渲染效果

經過上面的內容能夠知道，在slot組件中引入了slot的子組件，並且又在子組件標籤內添加了新的標籤內容，但頁面上並無將子組件標籤內的標籤內容顯示出來，

因此說在不適用slot的狀況下，在子組件標籤內添加Dom是無效的

如今來修改slot的子組件

<template>
  <div class="slot-child">
　　　//在子組件中添加slot標籤
      <slot></slot>
      我是slot的子組件
  </div>
</template>

<script>
export default {
  name: 'slotChild',
  data () {
    return {
      
    }
  }
}
</script>

頁面效果圖

因而可知，使用slot後能夠在子組件內顯示插入的新標籤

這裏只是講述了slot的簡單用法，slot的具名並無講到，並不難嘗試着寫寫就能夠，關鍵是要動手敲，光看是無法深入理解的