数据库 网站 模板,中小学生作文网,正规的无锡网站建设,站牛网是做什么的上篇文章 【Vue】Vue3.0#xff08;二十四#xff09;Vue3.0中 r e f s 、 refs 、 refs、parent 的概念和使用场景 #x1f3e1;作者主页#xff1a;点击#xff01; #x1f916;Vue专栏#xff1a;点击#xff01; ⏰️创作时间#xff1a;2024年11月20日16点30分 …上篇文章 【Vue】Vue3.0二十四Vue3.0中 r e f s 、 refs 、 refs、parent 的概念和使用场景 作者主页点击 Vue专栏点击 ⏰️创作时间2024年11月20日16点30分 文章目录 概念使用场景使用示例再来个实例 概念
在Vue 3.0中具名插槽是插槽的一种特殊形式它允许父组件向子组件的特定位置插入内容通过给插槽命名来实现更精确的内容分发。与默认插槽不同具名插槽可以在一个子组件中定义多个不同名称的插槽父组件根据这些名称将相应的内容插入到对应的位置从而使子组件的结构更加灵活和可定制。
使用场景
复杂组件的内容定制当一个组件的内部结构较为复杂不同部分需要由父组件根据具体业务场景提供不同内容时具名插槽就非常有用。比如一个包含导航栏、主体内容区和侧边栏的页面布局组件通过具名插槽父组件可以分别向这三个区域插入不同的导航链接、具体的页面内容和侧边栏信息实现页面布局和内容的灵活组合。组件库的开发在开发组件库时具名插槽可以让使用者更方便地对组件进行个性化定制。例如一个通用的卡片组件可能有标题、内容、操作按钮等不同的区域通过具名插槽使用者可以根据自己的需求向这些区域插入不同的文本、图标或按钮等内容而无需修改组件库的源代码提高了组件的复用性和灵活性。
使用示例
以下是一个使用具名插槽的示例包含一个Card组件和使用该组件的父组件
Card组件
templatediv classcarddiv classcard-headerslot nameheader/slot/divdiv classcard-bodyslot namebody/slot/divdiv classcard-footerslot namefooter/slot/div/div
/templatescript setup langts
import { defineComponent } from vue;export default defineComponent({});
/scriptstyle scoped
.card {border: 1px solid #ccc;border-radius: 5px;overflow: hidden;
}.card-header {background-color: #f0f0f0;padding: 10px;font-weight: bold;
}.card-body {padding: 10px;
}.card-footer {background-color: #f0f0f0;padding: 10px;text-align: right;
}
/style在Card组件中定义了三个具名插槽header、body和footer分别用于显示卡片的头部、主体和底部内容。
父组件使用Card组件
templatedivh2具名插槽示例/h2Cardtemplate v-slot:headerspan这是卡片的标题/span/templatetemplate v-slot:bodyp这是卡片的主体内容这里可以填写详细的信息。/p/templatetemplate v-slot:footerbutton查看详情/button/template/Card/div
/templatescript setup langts
import Card from ./Card.vue;
import { defineComponent } from vue;export default defineComponent({components: {Card,},
});
/script在父组件中通过template v-slot:header、template v-slot:body和template v-slot:footer分别向Card组件的对应具名插槽中插入了自定义的内容如标题、主体内容和操作按钮。这样就可以根据不同的需求灵活地定制Card组件的显示内容而无需修改Card组件本身的代码实现了组件的高度复用和灵活定制。
通过具名插槽Vue 3.0的组件能够更好地满足各种复杂的页面布局和内容定制需求提高了代码的可维护性和复用性使开发者能够更高效地构建应用程序。
再来个实例
最终效果 代码 Father.vue
templatediv classfatherh3父组件/h3div classcontentCategorytemplate v-slot:s2ulliv-forg in games:keyg.id{{ g.name }}/li/ul/templatetemplate v-slot:s1h2热门游戏列表/h2/template/CategoryCategorytemplate v-slot:s2img:srcimgUrlalt/templatetemplate v-slot:s1h2今日美食城市/h2/template/CategoryCategory!--简写#s2--template #s2videovideo:srcvideoUrlcontrols/video/templatetemplate #s1h2今日影视推荐/h2/template/Category/div/div
/templatescript setup langts nameFather
import Category from ./Category.vue
import { ref, reactive } from vue;let games reactive([{ id: asgytdfats01, name: 英雄联盟 },{ id: asgytdfats02, name: 王者农药 },{ id: asgytdfats03, name: 红色警戒 },{ id: asgytdfats04, name: 斗罗大陆 }
])
let imgUrl ref(https://z1.ax1x.com/2023/11/19/piNxLo4.jpg)
let videoUrl ref(http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4)/scriptstyle scoped
.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;
}.content {display: flex;justify-content: space-evenly;
}img,
video {width: 100%;
}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;
}
/styleCategory.vue代码
templatediv classcategoryslot names1默认内容1/slotslot names2默认内容2/slot/div
/templatescript setup langts nameCategory/scriptstyle scoped
.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;
}
/style
