默認(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ò)，歡迎將生活随笔推薦給好友。