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模版站位符告訴我們元件的每一項該如何渲...