VUE 元件(三)使用slot分發內容

2022-07-03 01:42:14 字數 988 閱讀 9928

當需要讓元件組合使用,混合父元件的內容與子元件的模板時,就會用到sloat,這個過程叫做內容分發。

props傳遞資料,events觸發事件,sloat分發內容,就構成了vue元件的3個api**。

一、slot的用法

單個slot

在子元件內使用特殊的元素就可以為這個子元件開啟乙個slot(插槽),在父元件模板裡,插入在子元件標籤內的所有內容將替代子元件的標籤及它的內容。

更多的分發內容

子元件child-component 模板內定義了乙個元素,並且用乙個作為預設的內容,在父元件沒有使用時,會渲染這段預設的文字,如果父元件寫入了,那父元件的slot會替換整個子元件的

最終渲染結果為:

更多的分發內容

注意:子元件內的備用內容,它的作用域是子元件本身

具名slot

給指定乙個name後可以分發多個內容,具名可以和單個共存

正文內容

更多正文內容

底部資訊

子元件內宣告了多個元素,其中內的沒有使用name特性,它將作為預設的出現,父元件沒有使用特性的元素與內容將出現在這裡

作用域插槽

作用域插槽是一種特殊的,使用乙個可復用的模板替換已渲染的元素。

來自父元件的內容

}

最終渲染結果為

來自子元件的內容

作用域插槽更具代表性的是列表元件,允許元件自定義列表每一項如何渲染

}作用域插槽的使用場景就是既可以復用子元件的slot有可以使slot內容不一致。

訪問slot

vue2中提供了$slots來訪問分發內容

正文內容

更多正文內容

底部資訊

通過slots可以訪問某個具名的slot,this.$slots.default包括來所有沒有具名的slot 

vue元件 使用插槽分發內容 slot

官網api 使用插槽分發內容 使用元件時,有時子元件不知道會收到什麼內容,這是由父元件決定的。1.my component 元件 div h2 我是子元件的標題 h2 只有在沒有要分發的內容時才會顯示。div 2.父元件 div h1 我是父元件的標題 h1 這是一些初始內容 這是更多的初始內容 d...

vue 使用Slot 分發內容 學習總結。

使用 slot 分發內容 官方api位址 我對solt的理解是當元件中某一項需要單獨定義,那麼就應該使用solt。舉例說明。例如專案中需要乙個模態框提示 付款成功,付款失敗。那麼這個模態框也就僅僅差這幾個字或者是狀態而已。那麼此時應用solt就是乙個非常不錯的選擇。除非子元件模板包含至少乙個插口,否...

Vue之slot內容分發

內容分發,使用特殊的元素作為原始內容的插槽,假設父元件需要在子元件內讓一些dom,那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示,就是slot分發負責的活。可以將父元件放在子元件的內容,放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...