您好,登录后才能下订单哦!
这篇文章主要介绍了vue架构插槽slot如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue架构插槽slot如何使用文章都会有所收获,下面我们一起来看看吧。
新建组件 Article
<template> <div> 日期:2022-01-15 <slot></slot> </div> </template>
新建 Learn,并在 Learn 中使用 Article
Learn.vue 和 Article.vue 在同一文件夹下
<template> <div> <Article> <div>送郎八月到扬州,长夜孤眠在画楼。女子拆开不成好,秋心合着却成愁</div> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
slot 相当于把 div 插入到 Article 中 slot 位置
运行效果
即使用 slot 时,不传入会显示默认的内容,传入则使用传入的内容
如不设置默认值,则不显示任何内容,代码如下
先看不设置默认值的情况
Article 内容
<template> <div> 日期:2022-01-15 <slot></slot> </div> </template>
Learn 内容
<template> <div> <Article> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
运行效果
设置默认值
Article 内容
<template> <div> 日期:2022-01-15 <slot> <div>醉眠芳树下,半被落花埋</div> </slot> </div> </template>
Learn 内容
<template> <div> <Article> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
运行效果
Article 内容
<template> <div> <slot name="title"></slot> 日期:2022-01-15 <slot name="content"></slot> </div> </template>
Learn 内容
<template> <div> <Article> <template v-slot:title> <div>窗前 【作者】赵崇嶓 </div> </template> <template v-slot:content> <div> 窗前寻丈地,种得一株梅。 明月清风我,红尘不复来。 </div> </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
通过给 slot 标签设置 name 属性值,并通过 v-slot 来对应
运行效果
v-slot:title 可以简写为 #title,代码如下
<template> <div> <Article> <template #title> <div>窗前 【作者】赵崇嶓 </div> </template> <template #content> <div> 窗前寻丈地,种得一株梅。 明月清风我,红尘不复来。 </div> </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
父级插槽使用子组件中的数据
Article 内容
<template> <div> 日期:2022-01-15 <slot v-bind:article="article"> <div>{{article.content1}}</div> </slot> </div> </template> <script> export default { data() { return { article: { content1: '从别后,忆相逢。几回魂梦与君同', content2: '今宵剩把银釭照,犹恐相逢是梦中' } } } } </script>
Learn 内容
<template> <div> <Article> </Article> <Article> <template v-slot:default="slotProps"> {{ slotProps.article.content2 }} </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
运行效果
看上下2个 Article 显示的区别,上边显示的是 content1,下边显示的是 content2
上面代码 v-slot:default="slotProps" 可以简写成 v-slot="slotProps"
简写后的代码
<template> <div> <Article> </Article> <Article> <template v-slot="slotProps"> {{ slotProps.article.content2 }} </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
解构插槽 Prop
在支持的环境下 (单文件组件或现代浏览器),可以使用 ES2015 解构传入具体的插槽 prop
代码如下
<template> <div> <Article> </Article> <Article> <template v-slot="{article}"> {{ article.content2 }} </template> </Article> </div> </template> <script> import Article from './Article.vue' export default { components: {Article} } </script>
Article 内容
<template> <div> <slot name="title"></slot> 日期:2022-01-15 <slot name="content"></slot> </div> </template>
Learn 内容
<template> <div> <Article> <template v-slot:[dynamicSlotName]> <div>身无彩凤双飞翼,心有灵犀一点通</div> </template> </Article> <button @click="changeSlotName">改变插槽名</button> </div> </template> <script> import Article from './Article.vue' export default { components: {Article}, data() { return { dynamicSlotName: 'title' } }, methods: { changeSlotName() { this.dynamicSlotName = 'content' } } } </script>
运行效果
关于“vue架构插槽slot如何使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue架构插槽slot如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。