生活随笔
收集整理的這篇文章主要介紹了
vue的插槽理解
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
默認(rèn)插槽
聲明一個(gè)child-component組件, 如果現(xiàn)在我想在內(nèi)放置一些內(nèi)容;
< div id
= "app" > < child
- component
> < / child
- component
> < / div
> < script
> Vue
. component ( 'child-component' , { template
: `<div>Hello,World!</div>` } ) let vm
= new Vue ( { el
: '#app' , data
: { } } ) < / script
>
在組件里面加入內(nèi)容
< child
- component
> 你好
< / child
- component
>
具名插槽
父組件
這里v-slot 只能在 template 里面使用 v-slot:item item為子組件slot的名字 遍歷時(shí),需要綁定key
子組件
slot里面 name 的值為 父組件定義那個(gè)名字 作用域插槽
父組件
itemProps是子組傳遞來(lái)的,slot里面綁定的值 子組件
在slot里面通過(guò) v-bind綁定值,傳遞給父組件
創(chuàng)作挑戰(zhàn)賽 新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔 為你收集整理的vue的插槽理解 的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔 推薦給好友。