這段時間一直在研究vue的用法，在學習過程中發現，官方文件對於插槽（slot）的描述實在有點過於簡練，費了我一番功夫才算弄明白，所以特地在此進行一番總結，也方便其他初學者了解該功能的用法。
當我們進行元件的開發時，有時會遇到這樣的需求：我希望向子元件傳遞一小段模板，將它展示在子元件的特定位置，而不希望模板的內容受到子元件的限制。
舉個最簡單的例子：向頁面布局元件傳入頁面內容，讓內容展示在正文部分。這種時候，就是插槽派上用場的時候。
通俗的說法就是，把模板當作引數傳給子元件，子元件不關心模板有什麼內容，只關心把它顯示在**。
只需要傳遞一段模板時，可以這麼寫：
父元件：
插槽展示內容<
/div>
<
/child>
<
/template>
子元件內容<
/div>
<
/slot>
<
/template>
子元件內容<
/div>
插槽展示內容<
/div>
<
/template>
給每個插槽模板借助v-slot:插槽名指定乙個名字，子元件就可以通過名字來區分不同的模板了。（老版本使用solt屬性，用法是一致的，新版本已廢棄）
父元件：
頭部插槽<
/div>
內容插槽<
/div>
尾部插槽<
/div>
<
/child>
<
/template>
子元件內容<
/div>
"header"
>
<
/slot>
<
/header>
"content"
>
<
/slot>
<
/main>
"footer"
>
<
/slot>
<
/footer>
<
/template>
子元件內容<
/div>
頭部插槽<
/header>
內容插槽<
/main>
尾部插槽<
/footer>
<
/template>
直接呼叫當然是行不通的，因為插槽的內容是在父級作用域中編譯的，但可以利用作用域插槽進行資料的傳遞。
在父元件中使用v-slot獲得子元件繫結到插槽上的資料（從2.6.0開始原本的slot-scope寫法遭到廢棄）：
"slotprops"
>
}<
/template>
<
/child>
<
/template>
v-bind將資料繫結到插槽上：
子元件內容<
/div>
"mydata"
>
<
/slot>
<
/template>
Vue 使用插槽（slot）
當父元件向子元件傳值的時候，有時候，父元件傳的並不是單純的數值 字串，有可能是帶標籤 dom 的資料，那麼如何傳值呢？如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...
Vue初學 插槽slot
匿名插槽 我們使用slot標籤在元件中定義插槽，當我們在呼叫元件的標籤內寫入內容的時候，這段內容會替換匿名的插槽，slot標籤相當於乙個佔位符。1.當插槽標籤中有內容，而且元件標籤內未插入任何資料時，頁面會顯示插槽標籤內的內容，相當於是插槽的預設值。但是如果元件標籤內插入了任意資料，頁面則會顯示元件...
Vue筆記 slot插槽
元件的插槽是為了讓封裝的元件有更好的擴充套件性，讓使用者決定要展示什麼東西 元件模板 cpn 我是cpnh2 slot div template html 中運用元件，並將不同的內容放入插槽 type button 確定button cpn 哈哈哈哈哈哈span cpn 呵呵呵呵呵呵span cpn...