Vue组件：插槽的使用

于 2024-09-09 17:27:34 发布
阅读量651 收藏 15
点赞数 16
分类专栏： Vue 我の原创 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pan_junbiao/article/details/142059779
版权

在实际开发中，子组件往往只提供基本的交互功能，而内容是有父组件来提供的。为此，Vue.js 提供了一种混合父组件内容和子组件模板的方式，这种方式称为内容分发。

1、基本用法

Vue.js 参照当前 Web Components 规范草案实现了一套内容分发的 API，使用 <slot> 元素作为原始内容的插槽。

【实例】插槽的基本用户。

（1）创建 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>父组件内容：插槽的使用</h3>

        <!-- 第三步：使用组件 -->
        <BlogSlot>
            <p>博客信息：{{ blogName }}</p>
            <p>博客信息：{{ blogUrl }}</p>
        </BlogSlot>
    </fieldset>
</template>

<script>
//第一步：引用组件
import BlogSlot from '@/components/BlogSlot.vue'

export default {
    data() {
        return {
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        }
    },
    //第二步：注册组件
    components: {
        BlogSlot,
    }
}
</script>

（2）创建 BlogSlot.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <!-- 核心代码：使用插槽 -->
        <slot></slot>
    </fieldset>
</template>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

（3）在 App.vue 根组件中，引入父组件

<template>
  <!-- 第三步：使用组件 -->
  <ParentComponent />
</template>

<script>
//第一步：引用组件
import ParentComponent from '@/components/ParentComponent.vue'

export default {
  //第二步：注册组件
  components: {
    ParentComponent,
  }
}
</script>

<style></style>

执行结果：

由渲染结果可以看出，父组件中的内容会被代替子组件中的 <slot> 标签，这样就可以在不同地方使用子组件的机构并且填充不同的父组件内容，从而提供组件的复用性。

2、编译作用域

上述实例代码在父组件中调用 <BlogSlot> 子组件，并绑定了父组件中的数据：blogName、blogUrl。其中的数据只能在父组件的作用域下进行解析，而不能在 <BlogSlot> 子组件的作用域下进行解析。也就是说，父组件模板里的所有内容都是在父组件作用域中编译的；子组件模板里的所有内容都是在子组件作用域中编译的。

3、默认内容

有些时候需要为一个插槽设置默认内容，该内容只会在没有提供内容的时候被渲染。

【实例】为插槽设置默认内容。

（1）修改 ParentComponent.vue 父组件，将插槽的内容注释掉

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>父组件内容：插槽的使用</h3>

        <!-- 第三步：使用组件 -->
        <BlogSlot>
            <!-- 父组件中，将插槽的内容注释掉 -->
            <!-- <p>博客信息：{{ blogName }}</p> -->
            <!-- <p>博客信息：{{ blogUrl }}</p> -->
        </BlogSlot>
    </fieldset>
</template>

（2）修改 BlogSlot.vue 子组件，为插槽设置默认内容

<template>
    <fieldset>
        <legend>子组件</legend>
        <!-- 核心代码：使用插槽，并设置默认内容 -->
        <slot>默认内容</slot>
    </fieldset>
</template>

执行结果：

4、命名插槽

如果要在组件模板中使用多个插槽，就需要到 <slot> 标签的 name 属性。通过这个属性可以为插槽命令。在向命令的插槽提供内容时，可以在一个 <template> 元素上使用 v-slot 指令，将插槽的名称作为 v-slot 指令的参数。这样，<template> 元素中的所有内容都将被传入相应的插槽。

【实例】使用命名插槽。

（1）修改 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>父组件内容：插槽的使用</h3>

        <!-- 第三步：使用组件 -->
        <BlogSlot>
            <!-- v-slot指令的参数需要与子组件中的slot元素的name值匹配 -->
            <template v-slot:blogName>
                <h3>插槽内容1：{{ blogName }}</h3>
            </template>

            <template v-slot:blogUrl>
                <h4>插槽内容2：{{ blogUrl }}</h4>
            </template>
        </BlogSlot>
    </fieldset>
</template>

<script>
//第一步：引用组件
import BlogSlot from '@/components/BlogSlot.vue'

export default {
    data() {
        return {
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        }
    },
    //第二步：注册组件
    components: {
        BlogSlot,
    }
}
</script>

（2）修改 BlogSlot.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <!-- 核心代码：使用插槽 -->
        <slot name="blogName"></slot>
        <hr>
        <slot name="blogUrl"></slot>
    </fieldset>
</template>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

执行结果：

5、作用域插槽

有些时候需要让插槽内容能够访问子组件中才有的数据。为了让子组件中的数据在父组件的插槽内容中可用，可以将子组件中的数据作为一个 <slot> 标签的属性并对其进行绑定。绑定在 <slot> 标签上的属性被称为插槽 Prop。然后在父组件作用域中，可以为 v-slot 设置包含所有插槽 Prop 的对象的名称。

【实例】单个插槽时，使用作用域插槽。

（1）修改 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>父组件内容：插槽的使用</h3>

        <!-- 第三步：使用组件 -->
        <BlogSlot v-slot="slotProps">
            <p>用户名称：{{ slotProps.userName }}</p>
            <p>用户年龄：{{ slotProps.age }}</p>
            <p>用户性别：{{ slotProps.sex }}</p>
            <p>博客信息：{{ slotProps.blogName }}</p>
            <p>博客信息：{{ slotProps.blogUrl }}</p>
        </BlogSlot>
    </fieldset>
</template>

<script>
//第一步：引用组件
import BlogSlot from '@/components/BlogSlot.vue'

export default {
    //第二步：注册组件
    components: {
        BlogSlot,
    }
}
</script>

（2）修改 BlogSlot.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <!-- 核心代码：使用插槽 -->
        <slot :userName="userName" :age="age" :sex="sex" :blogName="blogName" :blogUrl="blogUrl"></slot>
    </fieldset>
</template>

<script>
export default {
    data() {
        return {
            userName: 'pan_junbiao的博客',
            age: 36,
            sex: '男',
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        }
    }
}
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

执行结果：

上述代码中，将子组件中的数据 userName、age、sex、blogName、blogUrl 作为 <slot> 标签绑定的属性，然后在父组件作用域中，为 v-slot 设置的包含所有插槽 Prop 的对象的名称为 slotProps，在通过 {{ slotProps.userName }}、{{ slotProps.age }} 等即可访问子组件中的数据。

【实例】多个插槽时（命名插槽），使用作用域插槽。

（1）修改 ParentComponent.vue 父组件

<template>
    <fieldset>
        <legend>父组件</legend>
        <h3>父组件内容：插槽的使用</h3>

        <!-- 第三步：使用组件 -->
        <BlogSlot>
            <!-- v-slot指令的参数需要与子组件中的slot元素的name值匹配 -->
            <template v-slot:userInfo="slotProps">
                <p>用户名称：{{ slotProps.userName }}</p>
                <p>用户年龄：{{ slotProps.age }}</p>
                <p>用户性别：{{ slotProps.sex }}</p>
            </template>

            <template v-slot:blogInfo="slotProps">
                <p>博客信息：{{ slotProps.blogName }}</p>
                <p>博客信息：{{ slotProps.blogUrl }}</p>
            </template>
        </BlogSlot>
    </fieldset>
</template>

<script>
//第一步：引用组件
import BlogSlot from '@/components/BlogSlot.vue'

export default {
    //第二步：注册组件
    components: {
        BlogSlot,
    }
}
</script>

（2）修改 BlogSlot.vue 子组件

<template>
    <fieldset>
        <legend>子组件</legend>
        <!-- 核心代码：使用插槽 -->
        <slot name="userInfo" :userName="userName" :age="age" :sex="sex"></slot>
        <hr>
        <slot name="blogInfo" :blogName="blogName" :blogUrl="blogUrl"></slot>
    </fieldset>
</template>

<script>
export default {
    data() {
        return {
            userName: 'pan_junbiao的博客',
            age: 36,
            sex: '男',
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        }
    }
}
</script>

<style scoped>
fieldset {
    font-size: 18px;
    color: blue;
}
</style>

执行结果：

pan_junbiao
关注
  • 16
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue组件中插槽slot的使用
嗨皮的博客
01-13 933
vue组件中插槽的使用
Vue组件的插槽
weixin_61562639的博客
08-13 733
父组件模板的所有东西都会在父级作用域内编译； 子组件模板的所有东西都会在子级作用域内编译
15 VUE学习：插槽slot
热门推荐
百锦再的博客
05-23 9万+
如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。Vue 组件的插槽机制是受[原生 Web Component `` 元素]的启发而诞生，同时还做了一些功能拓展，这些拓展的功能我们后面会学习到。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。在上面的[渲染作用域]中我们讨论到，插槽的内容无法访问到子组件的状态。
VUE组件与插槽
m0_60027772的博客
07-16 1318
组件生效于vue的挂载区内，不管是全局还是局部自定义组件的内部不可以写内容，除非你用插槽组件内部，只能有一个根元素组件也可以直接写成自闭标签，但是这样写，那么后面的组件便不再生效决定组件是块级元素还是行级元素与里面的根标签有关。.........
Vue学习：插槽
H215919719的博客
11-07 1902
在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。​ 上面我们使用的是默认插槽,它是没有名字的,那如果一个组件内部,它将使用多个slot时,那我们怎么知道把某些代码片段放到那个slot中呢?]中我们讨论到，插槽的内容无法访问到子组件的状态.然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的,插槽内容。时，我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。
Vue组件(插槽)
syy的博客
01-08 501
Vue(插槽)
详解Vue组件插槽的使用以及调用组件内的方法
10-17
以上介绍了Vue组件插槽的使用以及如何在父组件中调用子组件的方法。通过插槽的灵活运用，可以让组件更加具有扩展性；而通过`ref`来调用子组件的方法，则可以实现组件间的数据交互和行为控制。这两者的结合使用，可以...
Vue组件与插槽
Jinx_baobao的博客
03-25 820
目录 一、什么是组件？ 组件化和模块化的不同： 全局组件定义的四种方式： 二、 组件中展示数据和响应事件 三、使用components属性定义局部子组件 四、使用:is属性来切换不同的子组件，并添加切换动画 五、slot插槽 1、插槽的使用 2、插槽的使用 - 具名插槽 3、插槽的使用 - 默认插槽 一、什么是组件？ 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。 组件化和模
vue使用自定义指令实现一键复制
最新发布
Zing_ing的博客
09-09 310
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
vue3.5新增特性
yunbabac的博客
09-05 411
vue3.5
GoFly企业版里的阿里图标如何增加自定义图标到后台
GoFLy开发者的博客
09-04 545
（3）将生成好的图标复制.js文件放到项目index.html文件中。（1）配置 FontClass/Symbol 前缀为：svgfont-（2）配置 Font Family 为 iconfont。在使用位置的组件，返回图标名称。
vue中slots插槽的使用
2403_86834756的博客
09-04 635
4.在Dome2中写入的代码与Dome1相似但里面的内容不一样，当我们启动不同页面时显示的是启动页面的数据，xxm-layout只是作为一个引用的页面当不同的页面用时显示不同的数据，就是说它的框架是固定的只需要为其传入值就行了。3.当我们有多个slot时就需要为其添加名称，否则编译器不知道因该为哪一个添加，就会出现有slot的地方都添加了数据，当我们为其添加名称后在子类中也需要通过名称为其写入数据。可以看到我们写入的数据在中间插槽处显示，并且头部和尾部相继显示在上下处。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1411
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
标签中的ref属性
qq_40792800的博客
09-04 770
可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 664
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
el-popover弹框自定义位置
weixin_47218354的博客
09-05 329
【代码】el-popover弹框自定义位置。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 958
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1002
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
Vue3.5新特性
weixin_72439307的博客
09-04 662
Vue3.5
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pan_junbiao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值