Vue 中的作用域插槽

2021-09-12 17:55:29 字數 994 閱讀 6411

vue.component('child',

},template: `

`,})

let vm = new vue()

上面**,如果此時有個需:child元件在很多地方會被呼叫,我希望在不同的地方呼叫child的元件時,這個列表到底怎麼迴圈,列表的樣式不是child元件控制的,而是外部child模版站位符告訴我們元件的每一項該如何渲染,也就是說這裡不用li標籤,而是要用slot標籤。

//固定寫法,屬性值可以自定義

} //用插值表示式就可以直接使用

vue.component('child',

},template: `

`,})

let vm = new vue()

這段**的意思是child元件去做乙個列表的迴圈,但是列表項中的每一項怎麼顯示,我並不關心,具體怎麼顯示,外部你來告訴我.

這是乙個固定寫法,屬性值可以自定義。它的意思是當子元件用slot時,會往子元件裡傳遞乙個item,從子元件接收的資料都放在了props上。

什麼時候使用作用域插槽呢?當子元件迴圈或某一部分的dom結構應該由外部傳遞進來的時候,我們要用作用域插槽,使用作用域插槽,子元件可以向父元件的作用域插槽裡傳遞資料,父元件如果想接收這個資料,必須在外層使用template模版佔位符,同時通過slot-scope對應的屬性名字,來接收你傳遞過來的資料,上面**,傳遞乙個乙個item過來,在父元件的作用域插槽裡面,就可以接收到這個item,就可以使用它了。

Vue中的插槽 具名插槽 作用域插槽

1 vue中插槽的作用和使用方法 定義乙個名cmpone子元件,為該子元件新增內容應該在子元件的template中定義,直接在父元件的標籤中裡定義的內容不會被渲染,如下例 使用插槽後渲染的內容span cmp one div const cmpone const vm newvue script 結...

Vue 中的作用域插槽

vue.component child template let vm new vue 上面 如果此時有個需 child元件在很多地方會被呼叫,我希望在不同的地方呼叫child的元件時,這個列表到底怎麼迴圈,列表的樣式不是child元件控制的,而是外部child模版站位符告訴我們元件的每一項該如何渲...

Vue 中的作用域插槽

vue.component child template let vm new vue 上面 如果此時有個需 child元件在很多地方會被呼叫,我希望在不同的地方呼叫child的元件時,這個列表到底怎麼迴圈,列表的樣式不是child元件控制的,而是外部child模版站位符告訴我們元件的每一項該如何渲...