vue具名插槽的基本使用實例
前言
具有名字的插槽slot使用 中的 “name” 屬性綁定元素
註意:
1,如果沒有匹配到 則放到匿名的插槽中
2,具名插槽的渲染順序,完全取決於模板,而不是取決於父組件中元素的順序
vue的匿名插槽(默認插槽)
父組件
<div> <myslot>我是剛剛</myslot> </div>
子組件
<div> <slot><slot> </div>
vue的具名插槽
父組件
<div> <myslot> <template #one>豬豬是一隻大肥貓</template> <template #two>通通是一個大屁眼子</template> <template #three>咪咪是沒心沒肺的小混蛋</template> 我是剛剛 </myslot> </div>
子組件
<div> <slot name="one"></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot> </div>
渲染出來(大致順序)即為
vue的作用域插槽
大白話解釋作用域插槽:父組件可以通過插槽讀到子組件對應插槽所帶的數據
父組件
<div> <myslot> <template #oneData="oneData"> <div>{{oneData.one.message}}</div> </template> <template #two>通通是一個大屁眼子</template> <template #three>咪咪是沒心沒肺的小混蛋</template> 我是剛剛 </myslot> </div>
子組件
<div> <slot name="one" :data='one'></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot> </div> <script> export default { data() { return { one: { message: '這是子組件所帶的數據message', }, }; }, } </script>
代碼優化
<div> <myslot> <template #oneData="{oneData}"> <div>{{oneData.message}}</div> </template> <template #two>通通是一個大屁眼子</template> <template #three>咪咪是沒心沒肺的小混蛋</template> 我是剛剛 </myslot> </div>
子組件
<div> <slot name="one" :oneData='one'></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot> </div> <script> export default { data() { return { one: { message: '這是子組件所帶的數據message', }, }; }, } </script>
總結
到此這篇關於vue具名插槽基本使用的文章就介紹到這瞭,更多相關vue具名插槽內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!