在元件中如果有相同地方,但又需要插入不同的內容時使用
1、預設插槽
用於插入一處內容
語法:
,使用1) 定義插槽: 2) 使用插槽: 《元件》插槽內容2、具名插槽
用於插入多處內容
語法:1) 定義插槽: 2) 使用插槽: 《元件》《標籤 slot="插槽名">插槽內容在定義插槽時,需要使用name屬性標識插槽名
slot="插槽名"
來識別用的是哪個插槽3、後備插槽
用於顯示預設內容
使用元件時不填充內容,則顯示預設插槽中的內容;如果元件中插入了內容則顯示插入的內容語法:
只在當前插槽使用生效(使用插槽時,必須使用1) 定義插槽: 後備內容2) 使用插槽: 《元件》4、作用域插槽
用於使用定義元件中的內部資料
注意:
template
標籤)
語法:
1) 定義插槽: 後備內容2) 使用插槽: }
scope
:接收到的是乙個物件,物件中有定義插槽時傳遞的資料
作用域插槽,在定義插槽時繫結了一些資料,但是在使用插槽時需要使用定義插槽裡面的資料
,此時需要使用作用域插槽
作用域插槽:顧名思義,有插槽自己的生效範圍,只能在使用插槽時用定義插槽的資料
vue插槽樣式 vue中的插槽slot
插槽 slot 是元件的一塊html模板,父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置,父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個,可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...
Vue中的插槽 具名插槽 作用域插槽
1 vue中插槽的作用和使用方法 定義乙個名cmpone子元件,為該子元件新增內容應該在子元件的template中定義,直接在父元件的標籤中裡定義的內容不會被渲染,如下例 使用插槽後渲染的內容span cmp one div const cmpone const vm newvue script 結...
Vue中插槽的使用。
寫在前面 vue中插槽的使用讓元件變得更加靈活。使得封裝乙個元件的復用性和api的暴露更加靈活多變。當元件當做標籤使用的時候,在標籤裡面的元素不會顯示,這個時候就需要用到插槽。一 最基本的使用 當元件當做標籤使用的時候,在元件標籤內部的標籤往往不顯示,這個時候就需要用到插槽。寫在元件標籤內部的標籤需...