普通插槽

在嵌入的組件標(biāo)簽中加入內(nèi)容，如果子組件中有slot就顯示，否則就是不顯示
父組件

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

子組件

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

如果不加入slot里的內(nèi)容就不會(huì)顯示Child里面的內(nèi)容

具名插槽

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

父組件

<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> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。