Vue slot簡單理解

2021-09-09 02:37:59 字數 1293 閱讀 8735

情形一:

子元件定義了具名的slot,父元件使用具名的

slot

,slot

顯示順序為子元件定義slot

的順序子元件:

vue.component('child',);
父元件使用子元件:

顯示順序按照子元件slot定義的順序。

情形二:

子元件定義了不具名的slot,父元件直接使用子元件,並可以直接在子元件中寫內容

子元件:

vue.component('btn',);
父元件:

<

btn>

按鈕btn

>

情形三:

子元件slot中定義了預設內容,如果父元件引入了子元件,且不寫內容,則顯示子元件預設內容,子元件定義的預設內容也可以提前加任何樣式或賦予任何標籤。但是

slot

標籤上不可以加任何樣式。如果父元件引入定義了slot的子元件,並且賦予了內容,則子元件預設的

slot

中的標籤與樣式不會加上去。如果想要給slot加樣式,要加在父元件上。

子元件:

vue.component('aaa',);
父元件:

<

aaa>

aaa>

<

aaa><

h6>哈哈哈哈哈

h6>

aaa>

<

aaa>哈哈哈哈哈

vue dom元素掛載:

new

vue({

vue slot插槽理解

新手上路,根據vue官方手冊記錄學習內容,主要知識點如下.插槽是用於向子元件分發內容的,當在父元件中應用子元件時,子元件標籤內的內容會分發到子元件模板中具有slot標籤的位置.如果子元件模板中沒有slot標籤,父元件裡子元件標籤內的內容會全部被丟棄掉的.原始碼 id model 我是model元件的...

vue slot 的理解,麼麼噠

slot標籤的定義 巨集觀 vue中專門為元件而服務的標籤 微觀 父元素在子元件中的佔位符。兩個作用,乙個注意 作用 決定位置 slot標籤決定了插入子元件中的父元素的位置 子.vue 我是子元素 div slot 父.vue 子 我是父元素 div 在子元件裡插入的父元素 子 瀏覽器 我是父元素 ...

vue slot內容分發

當需要讓元件組合使用,混合父元件的內容和子元件的模板的時候,就會用到slot。這個過程就叫內容分發。最為常用的是兩種slot 一種是匿名slot,一種是具名slot。匿名 很好理解 就是預設,沒有名字。具名 就是slot 有了name屬性,有了名字。下面來個綜合的小demo 父元件 我是testsl...