slot的使用場景：復用子組件的slot，且slot的內容不同

簡單使用案例

子組件

<div><h1>子組件</h1><slot name="child" msg='德瑪西亞'></slot></div>

父組件

<HelloWorld><p slot-scope='child' slot="child">{{child.msg}}</p></HelloWorld>

在列表中使用（推薦）

子組件

<template><ul><slot name="book" v-for="book in books" :bookName='book.name'></slot></ul> </template> <script>export default{props:{books:{type: Array,default: ()=>{return []}}}} </script>

父組件

<template><div id="app"><HelloWorld :books='books'><template slot='book' slot-scope='props'><li>{{props.bookName}}</li></template></HelloWorld></div> </template><script>import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {books: [{name: '《三體》'},{name: '《mysql從刪庫到跑路》'},{name: '《java從入門到放棄》'},{name: '《JavaScript高級程序編程》'}]}},} </script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;} </style>

總結

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

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