Vue slot 详解

Vue中,我们使用组件来组织页面和组织代码,类似于搭积木,每一个组件都是一个积木,使用一些相同或者不同组件就能搭建出我们想要的页面。slot(插槽)是组件功能的重要组成部分,插槽必须用于组件才有意义。它为组件提供了对外的接口,允许从组件外部传递内容,并将这部分内容放置到指定的位置。

使用 slot

当一个组件可能被使用至少两次并且两次使用内容(这里指组件视图的组成)不同时,插槽才有存在的必要。注意: 本文的代码都是基于Vue3编写

基础用法

Link.vue






App.vue




视觉效果:

Vue slot 详解_第1张图片

以上实现了两个组件Link.vueApp.vueLink.vue是一个链接组件,在组件内部已经定义好了样式,然后链接的内容交由外界使用时填充。在App.vue组件内则使用了Link.vue组件两次,并且两次传入的内容不同。

具名插槽

上面的Link.vue只要求填充一份内容,那么当我们需要在组件的好几个位置都填充不同的内容应该怎么办?这时候可以使用具名插槽,就是给组件的每个填充区域都取个名字,这样在使用的时候就可以往对应名字的那个区域填充内容。

Page.vue






App.vue


你可能感兴趣的:(前端,html,vue.js,前端,javascript)