Vue进阶（幺贰捌）：Vue插槽：slot、slot-scope与指令v-slot使用方法区别讲解
【摘要】 在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue中插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。
demo
不具名插槽
<body> <div id="app"> <Test> <div>slot插槽占位内容</di...
在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue中插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。
demo
不具名插槽
<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> <template id="test"> <div> <slot></slot>//定义插槽 <h3>这里是test组件</h3> </div> </template> </body>
<script> Vue.component('Test',{ template:"#test" }); new Vue({ el:"#app", })
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
具名插槽
<body> <div id="app"> <Test> <div slot="header">这里是头部</div>//具名插槽使用 <div slot="footer">这里是尾部</div> </Test> </div> <template id="test"> <div> <slot name="header"></slot>//具名插槽 <h3>这里是Test组件</h3> <slot name="footer"></slot> </div> </template>
</body>
<script> Vue.component( 'Test',{ template:"#test" }); new Vue({ el:"#app" })
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
v-slot
v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容。
<body> <div id="app"> <Test> <template v-slot:header>//v-slot指令使用插槽 <h2>slot头部内容</h2> </template> <p>直接插入组件的内容</p> <template v-slot:footer> <h2>slot尾部内容</h2> </template> </Test> </div> <template id ='test'> <div class="container"> <header> <!-- 我们希望把页头放这里 --> <slot name = "header"></slot>//具名插槽 </header> <section> 主体内容部分 </section> <footer> <!-- 我们希望把页脚放这里 --> <slot name = 'footer'></slot> </footer> </div> </template> </body>
<script> Vue.component('Test',{ template:"#test" }); new Vue({ el:"#app" })
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
作用域插槽：
slot-scope使用：
-
在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。
-
在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。
-
通过scope.xxx就可以使用绑定数据了
<body> <div id="app"> <Test> <div slot="default" slot-scope="scope">//作用域插槽的用法（slot-scope） {{ scope.msg }} </div> </Test> </div> <template id="test"> <div> <slot name="default" :msg="msg"> </slot> <p>这里是test组件</p> </div> </template>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
<script> new Vue({ el:"#app", components:{ 'Test':{ template:"#test", data(){ return { msg:"你好" } }, } } })
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
作用域插槽：v-slot的用法
<body> <div id="app"> <Test> <template v-slot:header="scope">//v-slot定义作用域插槽 <div> <h3>slot</h3> <p> {{scope.msg}} </p> </div> </template> </Test> </div> <template id="test"> <div> <slot name="header":msg="msg"></slot> <p>这里是test组件</p> </div> </template> </body>
<script> Vue.component('Test',{ template:"#test", data(){ return { msg:'这里是头部' } } }); new Vue({ }).$mount("#app")
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope，但是从上述案例可以看出，v-slot在使用时，需要在template标签内，这点大家在应用时要注意。
文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。
原文链接：shq5785.blog.csdn.net/article/details/106742853
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）