情形一:
子元件定義了具名的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元素掛載:
newvue({
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...