先寫一段簡單的**
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
元素,可以讓它顯示預設內容,如下:
預設內容
如果現在有個需求是,header
和footer
是由外部引入的該怎麼弄呢?如下
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傳...