vue的slot作用域插槽使用案例

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作用域插槽使用案例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。