vue中的slot（插槽）

1 、slot 基本用法

插槽指允許將自定義的元件像普通標籤一樣插入內容

import vue from

'vue'
// 定義元件componentone 
const compoentone =}}
}

// 呼叫元件

newvue(,
el:'#id'
,data()
},template:
` } // 使用插槽
`})

給具體的插槽命名，並在使用的時候傳入插槽的名稱

import vue from

'vue'
// 定義元件componentone 
const compoentone =}}
}

// 呼叫元件

newvue(,
el:'#id'
,data()
},template:
` } // 使用插槽'header**重點內容**'
} // 使用插槽'body'
`})

將定義插槽的變數作用域到使用插槽中

import vue from

'vue'
// 定義元件componentone 
const compoentone =
, val1:
'slot1'
, val2:
'slot2'}}
}

// 呼叫元件

newvue(,
el:'#id'
,data()
},template:
` }}} // 定義插槽傳入的物件props,並使用
`})

4、具名插槽（2.6以後）

有時候我們希望在指定的位置輸出我們的子元素，這時候具名插槽就排上了用場。

//元件呼叫時

//這裡v-slot：後邊的值與元件內的slot的name屬性對應，也就是插槽的名稱。
list
//書寫元件時
} //這裡name的值就是這個插槽的名稱。

5、作用域插槽（vue2.6以後）

作用域插槽的主要作用是在書寫插槽內容時可以獲取到插槽作用域的值。

//元件呼叫

//書寫元件時

這裡需要注意的是message是所有你繫結屬性的集合，也就是你寫的：aa=「title」會當做message的屬性來實現。當然這裡message可以換做其它的名稱。

總結v-slot的出現是為了代替原有的slot和slot-scope

簡化了一些複雜的語法。

一句話概括就是v-slot ：後邊是插槽名稱，=後邊是元件內部繫結作用域值的對映。

vue插槽樣式 vue中的插槽slot

插槽 slot 是元件的一塊html模板，父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置，父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個，可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...

Vue中的slot插槽

前言 之前學vue對插槽只有乙個模糊的存值概念，最近在封裝自定義元件時，再次學習一下。通過slot插槽向元件內部指定位置傳遞內容，通過slot可以父子傳參，簡化了進行自定義元件的封裝和使用。自己對插槽理解 就是乙個站位html模板，用來攜帶內容，插入到合適的位置，由父元件來決定其顯示的內容，使得模組...

Vue中的插槽 slot

一 什麼是插槽？二 怎麼用插槽？2.1預設插槽 子元件 template div class slotcontent ul li v for item in items li ul div template script export default script style scoped styl...