一：什麼是插槽？
二：怎麼用插槽？
2.1預設插槽
子元件
<父元件template
>
<
div
class
="slotcontent"
>
<
ul>
<
li v-for
="item in items"
>}
li>
ul>
div>
template
>
<
script
>
export
default
, ,,]
}}}script
>
<
style
scoped
>
style
>
跳轉到詳情效果圖：父元件}
解釋：這種情況是如果要父元件在子元件中插入內容 ，必須要在子元件中宣告slot標籤 ，如果子元件模板不包含插口，父元件的內容}
將會被丟棄。
當slot存在預設值預設值
，且父元素在中沒有要插入的內容時，會顯示預設值
（p標籤會去掉），當slot存在預設值，且父元素在中存在要插入的內容時，則顯示父元件中設定的值，
2.2 具名插槽
子元件
<解釋：在子元件中定義了三個slot標籤，其中有兩個分別新增了name屬性header和footertemplate
>
<
div
class
="slottwo"
>
<
div>slottwo
div>
<
slot
name
="header"
>
slot
>
<
slot
>
slot
>
<
slot
name
="footer"
>
slot
>
div>
template
>
父元件
<解釋：在父元件中使用template並寫入對應的slot值來指定該內容在子元件中現實的位置（當然也不用必須寫到template），沒有對應值的其他內容會被放到子元件中沒有新增name屬性的slot中。template
>
<
div>
我是父元件
<
slot-two
>
<
p>啦啦啦，啦啦啦，我是賣報的小行家
p>
<
template
slot
="header"
>
<
p>我是name為header的slot
p>
template
>
<
p slot
="footer"
>我是name為footer的slot
p>
slot-two
>
div>
template
>
2.3 作用域插槽
子元件
<解釋：在子元件的slot標籤上繫結需要的值template
>
<
div>
我是作用域插槽的子元件
<
slot
:data
="user"
>
slot
>
div>
template
>
<
script
>
export
default
, ,]}
}}script
>
父元件
<解釋：在父元件上使用slot-scope屬性，user.data就是子元件傳過來的值template
>
<
div>
我是作用域插槽
<
slot-three
>
<
template
slot-scope
="user"
>
<
div
v-for
="item in user.data"
:key
="item.id"
>
}
div>
template
>
slot-three
>
div>
template
>
大概是可以這麼理解的：
我理解的就像是函式的引數變數一樣function(filed)
這個slot就是這個變數，隨便我們插入到哪個位置（自己預定義）
vue插槽樣式 vue中的插槽slot
插槽 slot 是元件的一塊html模板，父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置，父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個，可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...
Vue中的slot插槽
前言 之前學vue對插槽只有乙個模糊的存值概念，最近在封裝自定義元件時，再次學習一下。通過slot插槽向元件內部指定位置傳遞內容，通過slot可以父子傳參，簡化了進行自定義元件的封裝和使用。自己對插槽理解 就是乙個站位html模板，用來攜帶內容，插入到合適的位置，由父元件來決定其顯示的內容，使得模組...
vue中的slot（插槽）
1 slot 基本用法 插槽指允許將自定義的元件像普通標籤一樣插入內容 import vue from vue 定義元件componentone const compoentone 呼叫元件 newvue el id data template 使用插槽 2 具名插槽 給具體的插槽命名，並在使用的時...