在 Vue 中是使用插槽

2021-09-12 16:14:13 字數 1255 閱讀 3313

先寫一段簡單的**

dell

">

vue.component('child', ,

template: `hello

`,})

let vm = new vue()

這種寫法有兩個問題:

p標籤外面會有一層div,這個div是無法去掉的,有人會想,能不能用template代替,其實是不可以的,在這裡模版站位符是不能用的。

如果content傳遞的內容很多,**就會變得很難閱讀。

當我的子元件有一部分內容,是根據父元件傳遞過來的dom進行顯示的話,這時候可以換一種語法。

dell

//這種語法看起來非常像,用子元件,我向裡插入內容

vue.component('child', ,

template: `hello

//slot 標籤顯示的內容就是父元件向子元件插入進來的內容

`,})

let vm = new vue()

dell

這種語法看起來非常像,用子組我向裡插入內容,所以我們把它叫做插槽。

slot標籤顯示的內容就是父元件向子元件插入進來的內容。

通過插槽可以更方便的向子元件傳遞dom元素,同時子元件只需通過slot來使用就可以了。

如果子元件裡沒有dom元素,可以讓它顯示預設內容,如下:

預設內容
如果現在有個需求是,headerfooter是由外部引入的該怎麼弄呢?如下

header

footer

vue.component('body-content', ,

template: `

content

`,})

let vm = new vue()

slot標籤name屬性對應的是元件中slot屬性,通過這種寫法,可以在呼叫子元件時,一次性傳遞多個區域的dom結構,在子元件裡通過具名插槽來分別使用不同部分的dom結構

在 Vue 中是使用插槽

先寫一段簡單的 dell vue.component child template hello let vm new vue 這種寫法有兩個問題 p標籤外面會有一層div,這個div是無法去掉的,有人會想,能不能用template代替,其實是不可以的,在這裡模版站位符是不能用的。如果content傳...

在 Vue 中是使用插槽

先寫一段簡單的 dell vue.component child template hello let vm new vue 這種寫法有兩個問題 p標籤外面會有一層div,這個div是無法去掉的,有人會想,能不能用template代替,其實是不可以的,在這裡模版站位符是不能用的。如果content傳...

在 Vue 中是使用插槽

先寫一段簡單的 dell vue.component child template hello let vm new vue 這種寫法有兩個問題 p標籤外面會有一層div,這個div是無法去掉的,有人會想,能不能用template代替,其實是不可以的,在這裡模版站位符是不能用的。如果content傳...