vue中slot的作用

2021-10-24 21:38:26 字數 571 閱讀 1381

1,用法一:slot作為標籤使用

父元件:

我不應該顯示出來

子元件:slotchild.vue

我應該顯示的

理論上父元件裡應該寫,以上的**即使中間插入了其他內容也是無效的,不顯示。

為了能夠顯示中間的內容,使用slot即可:

子元件:slotchild.vue

我應該顯示的

這樣,父元件就可以往中間插入了,且內容顯示在的位置。

2,用法二:slot作為屬性使用

開心   

希望的效果是大海中間有空格:大   海 ,但是實際列印的效果是:大 海,也就是說屬性中是不允許以 的方式新增空格的,這個時候使用slot代替label屬性的內容:

大 海

開心

這個時候就能正常顯示  「大  海」  的提示標籤了,此時slot的作用相當於代替父級標籤的某個屬性值

Vue中的slot插槽

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

vue中的slot(插槽)

1 slot 基本用法 插槽指允許將自定義的元件像普通標籤一樣插入內容 import vue from vue 定義元件componentone const compoentone 呼叫元件 newvue el id data template 使用插槽 2 具名插槽 給具體的插槽命名,並在使用的時...

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...