單個數據可以不用冒號，多個數據的傳輸需要用冒號，例如：

<template><div class="layat"><Category :listData='foods' title='美食'/><Category :listData='games' title='游戲'/><Category :listData='films' title='電影'/></div> </template> <script>import Category from './components/Category.vue';export default {name: "App",data() {return {foods:['火鍋','麻辣燙'],games:['紅色警戒','王者榮耀'],films:['《教父》','《申肖克的救贖》']};},components: {Category} } </script> <style scoped>.layat{display: flex;justify-content: space-around;} </style>

先在需要的地方安置默認插槽

<template><div class="category"><h3>{{title}}分類</h3><!-- 定義一個插槽（挖個坑，等著組件的使用者填充） --><slot>我是默認值，當沒有使用者傳遞具體結構的時候，我會出現</slot><!-- <slot></slot> --><!-- <img v-show="title === '美食'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F586efa1eb0cee.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657188785&t=82d1eca71997aaa96b3c356b575a1875" alt=""> --></div> </template>

給插槽留置數據（填坑）

<template><div class="layat"><Category :listData='foods' title='美食'><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F586efa1eb0cee.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657188785&t=82d1eca71997aaa96b3c356b575a1875" alt=""></Category><Category title='游戲'><ul><li v-for="(item,index) in games" :key='index'>{{item}}</li></ul></Category><Category title='電影'><video src="https://vd3.bdstatic.com/mda-nb361cngvqqycn0m/sc/cae_h264_delogo/1643948530199736901/mda-nb361cngvqqycn0m.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1654599647-0-0-26ef8d251daa4bce05fd6353ee7f158b&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1847308281&vid=4792238013959730087&abtest=101830_1-102148_1-102599_2-17451_1-3000232_2-3000233_2&klogid=1847308281" controls></video></Category></div> </template>

具名插槽（1+1）

<template><div class="layat"><Category :listData='foods' title='美食'><img slot="center" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F586efa1eb0cee.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657188785&t=82d1eca71997aaa96b3c356b575a1875" alt=""><div slot="footer" class="footer"><a href="#" target="_blank">更多美食</a></div></Category><Category title='游戲'><ul slot="center"><li v-for="(item,index) in games" :key='index'>{{item}}</li></ul><div slot="footer" class="foot"><a href="#" target="_blank">更多美食</a><a href="#" target="_blank">更多美食</a></div></Category><Category title='電影'><video slot="center" src="https://vd3.bdstatic.com/mda-nb361cngvqqycn0m/sc/cae_h264_delogo/1643948530199736901/mda-nb361cngvqqycn0m.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1654599647-0-0-26ef8d251daa4bce05fd6353ee7f158b&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1847308281&vid=4792238013959730087&abtest=101830_1-102148_1-102599_2-17451_1-3000232_2-3000233_2&klogid=1847308281" controls></video><template slot="footer" ><div class="foot"><a href="#" target="_blank">經典</a><a href="#" target="_blank">熱門</a><a href="#" target="_blank">推薦</a></div><h4>勇敢牛牛,不怕困難</h4></template></Category></div> </template> <script>import Category from './components/Category.vue';export default {name: "App",data() {return {foods:['火鍋','麻辣燙'],games:['紅色警戒','王者榮耀'],films:['《教父》','《申肖克的救贖》']};},components: { Category} } </script> <style scoped>.layat,.foot{display: flex;justify-content: space-around;}img{width: 100%;}video{width: 100%;}.footer{text-align: center;}h4{text-align: center;}</style>

插槽

作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用于 父組件 ===> 子組件 。

分類：默認插槽、具名插槽、作用域插槽

使用方式：

父組件中：<Category><div>html結構1</div></Category> 子組件中：<template><div><!-- 定義插槽 --><slot>插槽默認內容...</slot></div></template>

具名插槽：

父組件中：<Category><template slot="center"><div>html結構1</div></template><template v-slot:footer><div>html結構2</div></template></Category>子組件中<template><div><!-- 定義插槽 --><slot name="center">插槽默認內容...</slot><slot name="footer">插槽默認內容...</slot></div> </template>

作用域插槽：

理解：數據在組件的自身，但根據數據生成的結構需要組件的使用者來決定。（games數據在Category組件中，但使用數據所遍歷出來的結構由App組件決定）

父組件中： <Category><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4標題 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template> </Category> 子組件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//數據在子組件自身data() {return {games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']}},}</script>

總結

以上是生活随笔為你收集整理的【props单个数据绑定和多个数据绑定+vue默认插槽的基本使用+具名插槽的写法（2种）+插槽作用域3】的全部內容，希望文章能夠幫你解決所遇到的問題。

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