Vue之slot內容分發

2021-08-04 08:39:33 字數 690 閱讀 1474

內容分發,使用特殊的元素作為原始內容的插槽,假設父元件需要在子元件內讓一些dom,那麼這些dom是顯示、不顯示、在哪個地方顯示、如何顯示,就是slot分發負責的活。

可以將父元件放在子元件的內容,放到想讓他顯示的地方;

父元件放在子元件的內容插到了子元件的位置

將放在子元件裡的不同html標籤放在不同的位置,父元件在要分發的標籤裡新增slot="name名"屬性;

子元件在對應分發的位置slot標籤裡,新增name="name名"屬性,然後就會將對應的標籤放在對應的位置裡

class="swiper-pagination" slot="pagination">div>

根據所在模板決定。

雖然被其子元件的children標籤所包括,但由於不在子元件的template屬性內,因此不屬於子元件,受父元件控制

父元件模板的內容在父元件作用域內編譯;子元件模板的內容在子元件作用域內編譯

父元件沒有在子元件中放置標籤,或者父元件在子元件中放置標籤,但有slot屬性,而子元件沒有該slot屬性的標籤,那麼子元件的slot標籤將不會起到任何作用。

除非該slot標籤內有內容,那麼在無分發內容的時候會顯示該slot標籤內的內容

vue2 0 之 slot 內容分發

前提 父元件模板的內容在父元件作用域內編譯 子元件模板的內容在子元件作用域內編譯。被分發的內容會在父作用域內編譯。一 單個插槽 子元件模板 child component 只有在沒有要分發的內容時才會顯示。父元件模板 父元件模板中的子元件child component中的內容渲染到slot插槽中,若...

玩轉vue的slot內容分發

單個slot 在children這個標籤裡面放dom,vue不會理你,也就是不會顯示,類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑,等著父元件給填上,這邊 slot 代...

玩轉vue的slot內容分發

單個slot 在children這個標籤裡面放dom,vue不會理你,也就是不會顯示,類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑,等著父元件給填上,這邊 slot 代...