普通插槽

在嵌入的組件標簽中加入內容，如果子組件中有slot就顯示，否則就是不顯示
父組件

<h1>Hello 父組件</h1> <Child><p>這是一些初始內容</p><p>這是更多的初始內容</p> </Child>

子組件

<h1>Hello World</h1> <slot></slot>

如果不加入slot里的內容就不會顯示Child里面的內容

具名插槽

用來篩選插槽里的template內容），在子組件通過name來選定指定內容

父組件

<h1>Hello組件</h1><Child><template slot="header"><p>我是name為header的slot</p></template><template slot="footer"><h1>我是name為footer的slot</h1></template></Child>

子組件

<h1>Hello World</h1><slot name='header'></slot><slot name='footer'></slot>

作用域傳參

拿到子組件里data的值
父組件

我是作用域插槽
父組件

<Child><template slot-scope="user"><div v-for="item in user.data" :key="item.id">{{item}}</div></template></Child>

子組件

<template><div>我是作用域插槽的子組件<slot :data="user"></slot></div> </template><script> export default {name: 'slotthree',data () {return {user: [{name: 'Jack', sex: 'boy'},{name: 'Jone', sex: 'girl'},{name: 'Tom', sex: 'boy'}]}} } </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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