默認插槽

聲明一個child-component組件，
如果現在我想在內放置一些內容;

<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>

在組件里面加入內容

<child-component>你好</child-component>

具名插槽

父組件

這里v-slot 只能在 template 里面使用

v-slot:item item為子組件slot的名字

遍歷時，需要綁定key

子組件

slot里面 name 的值為 父組件定義那個名字

作用域插槽

父組件

itemProps是子組傳遞來的，slot里面綁定的值

子組件

在slot里面通過 v-bind綁定值,傳遞給父組件

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue的插槽理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。