欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 人文社科 > 生活经验 >内容正文

生活经验

Vue插槽 slot

发布时间：2023/11/27 生活经验 36 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Vue插槽 slot 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 什么是插槽

　　插槽slot 是往父组件中插入额外内容，实现组件的复用，一个插槽插入到一个对应的标签中

2. 实例：

　　一个组件中不允许有两个匿名插槽

</head>
<body><div id="root"><child><div class="header" slot="header">header</div><div class="footer" slot="footer">footer</div>hello     <！-- 没有名字的标签默认会放置到name:default的slot中 --></child></div>
<script>Vue.component('child',{template: `<div><slot name="header"></slot>   <!--  有名插槽 --><div class="content">content</div><slot name="footer"></slot>   <!--  有名插槽 --><slot>如果没有hello就显示slot的内容</slot>  <!--  匿名插槽   slot中可以设置默认内容，如果传递了内容则替换掉 --></div>`
    })var vm = new Vue({el: '#root'})
</script>
</body>

 3. 作用域插槽

固定写法：父组件中<template slot-scope="props"></template>      //props可以自定义用来接收子组件的数据

<body><div id="root"><child><template slot-scope="props"><li>{{props.item2}}</li>   //接收子组件的item值</template></child></div>
<script>Vue.component('child',{data(){return{list:[1,2,3,4]}},template: `<div><ul><slot v-for="item of list" :item2="item"></slot></ul></div>`
    })var vm = new Vue({el: '#root'})
</script>
</body>

 

转载于:https://www.cnblogs.com/ly2646/p/9464924.html

总结

以上是生活随笔为你收集整理的Vue插槽 slot的全部内容，希望文章能够帮你解决所遇到的问题。

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