大白話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的具名並沒有講到，並不難嘗試着寫寫就可以，關鍵是要動手敲，光看是沒法深刻理解的