簡單的說就是在元件內部留下乙個或者多個的空位(插槽), 我們可以將對應的模板**放進去。插槽的出現讓元件變得更加得靈活。在諸如element-ui,iview等元件庫中都充分利用了插槽的作用。
匿名插槽：就是沒有名字的插槽，也就是預設的插槽；
具名插槽：具有乙個確定名字的插槽，可以通過這個名字找到這個插槽；
作用域插槽：說白了就是在元件上的屬性，在元件元素內部使用，這麼說可能不是很能理解，稍後再解釋；
話不多說，先上**：
//這是乙個元件，我們以單頁面的形式給出
vue.
component
("component-one",)
//沒有用插槽引用這個元件
<
/component-one>
//渲染結果：
hellp<
/p>
<
/div>
*****=
*****=
*****=
*****=
*****=
*****=
=//新增乙個插槽的引用元件
你好<
/component-one>
//渲染結果：
hellp<
/p>
你好<
/div>
注意
通常情況下我們往插槽裡面插入東西都是以template標籤的形式，這樣顯得規範些；
//如上元件component-one使用template插入插槽
你好<
/template>
<
/component-one>
//元件定義
vue.
component
("component-two",)
//元件引用
"one"
>
這是one插槽內容
<
/template>
"two"
>
這是two插槽內容
<
/template>
這是預設
(匿名)插槽
<
/div>
<
/component-two>
//渲染結果
你好 這是one插槽內容
這是two插槽內容
這是預設
(匿名)插槽
<
/div>
注意四點
具名插槽的內容必須使用模板包裹
不指定名字的模板插入匿名插槽中，推薦使用具名插槽，方便**追蹤且直觀清楚
匿名插槽具有隱藏的名字"default"
具名插槽的v-slot:可以縮寫為#
剛剛我們說過，作用域插槽其實就是元件上的屬性在元件元素內的使用；我們來解釋下這個意思：
先看乙個例子：
//定義元件
="child-page"
>
}子頁面<
/h1>
"header"
>
<
/slot>
"body"
>
<
/slot>
"footer"
>
<
/slot>
<
/div>
props:
}//使用元件
:title=
"'我是'"
>
//元件內部 （子）
}<
/p>
//此處是錯誤的
<
/template>
腳部<
/p>
<
/template>
身體<
/p>
<
/template>
<
/child-page>
如果需要使用我們需要這樣做：
//定義元件
="child-page"
>
}子頁面<
/h1>
"header"
:say:
"title"
>
<
/slot>
"body"
>
<
/slot>
"footer"
>
<
/slot>
<
/div>
props:
}//使用元件
:title=
"'我是'"
>
"say"
>
}<
/p>
//<
/template>
腳部<
/p>
<
/template>
身體<
/p>
<
/template>
<
/child-page>
總結：父元件傳參給子元件，props接收後，插槽slot再通過繫結屬性傳遞引數返回給父元件，不管是模板**還是資料，控制權完全掌握在父元件手裡。
2019-11-19 好久沒有寫一些博文了，以後堅持每天寫一點東西，讓自己理解的更好些，加油！
vue插槽樣式 Vue的插槽的簡單介紹以及示例
vue插槽的概念 vue的插槽，是一種內容分發機制，但是我感覺它更加像元件的一種佔位符的概念，通過插槽，等待元件外部傳入複雜的內容。使用插槽的好處 在以前的例子中todo item插槽直接寫在了todo list插槽中，其實是比較不合理的，它會導致todo list插槽比較死板，無法重用更多的其他元...
vue插槽樣式 vue中的插槽slot
插槽 slot 是元件的一塊html模板，父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置，父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個，可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...
Vue中的插槽 具名插槽 作用域插槽
1 vue中插槽的作用和使用方法 定義乙個名cmpone子元件，為該子元件新增內容應該在子元件的template中定義，直接在父元件的標籤中裡定義的內容不會被渲染，如下例 使用插槽後渲染的內容span cmp one div const cmpone const vm newvue script 結...