Vue 15-具名插槽、作用域插槽

最新推荐文章于 2024-05-28 17:25:55 发布
最新推荐文章于 2024-05-28 17:25:55 发布
阅读量248 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lin16819/article/details/100995845
版权

一.具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>插槽slot</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <body-content>
            <!-- slot="插槽名" 定义插槽名 -->
            <div class="header" slot="header">I am header</div>
            <div class="footer" slot="footer">I am footer</div>
        </body-content>
    </div>
    <script>
        Vue.component('body-content', {
            // 通过<slot name="">使用具名插槽
            template:`<div>
                        <slot name="header"></slot>
                        <div class="content">content</div>
                        <slot name="footer">
                            <em>defalut ftext</em>
                        </slot>
                      </div>`
        })
        var vm = new Vue({
            el: '#root',           
        })
    </script>
</body>
</html>

二.作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <child>
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
        </child>
    </div>
    <script>
        Vue.component('child', {
            data: function(){
                return {
                    list: [1,2,3,4]
                }
            },
            template: `<div>
                            <ul>
                                <slot v-for="item of list"
                                    :item=item                                
                                ></slot>
                            </ul>
                        </div>`
        })

        var vm = new Vue({
            el: '#root',
        })
    </script>
</body>
</html>
Sukie_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的作用域插槽
z12845464的博客
12-27 8334
作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。
Vue中slot的使用(具名插槽与作用域插槽)
CherishTaoTao的博客
06-14 3989
本篇文章简单介绍具名插槽及作用域插槽的使用1、插槽就是子组件中的提供给父组件使用的一个占位符，在子组件中用< slot>< /slot > 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的< slot>< /slot >标签。（简单来说就是在子组件中挖个坑让别人来跳） 2、在 2.6.0 版本之后，slot 以及 slot-scope 由 v-slot 统一替代。 3、插槽包括默认插槽、具名插槽和作用域插槽 三、具名插槽的使用 1.子组件配置slot 在子组件中
vue系列之 插槽(Slot) 详解
最新发布
码喽的自我修养
05-28 1795
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
Vue2 插槽的使用【默认插槽、具名插槽、作用域插槽】
weixin_52212950的博客
12-12 1万+
这篇文章我们一起来学习一下 Vue2 插槽的使用，文章大致分为两个模块，第一部分是什么是插槽，其作用是什么，第二部分为三种插槽的使用，分别为默认插槽，具名插槽，作用域插槽，相信大家学习完这篇文章后一定会受益匪浅。
Vue-几种插槽(slot)的使用
见证自己学习,成长的记录
06-22 1万+
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
Vue3插槽学习
m0_47613744的博客
06-12 1020
插槽的分类如下。1. 默认插槽；2. 默认作用域插槽；3. 具名插槽；4. 具名作用插槽；
详解Vue 匿名、具名和作用域插槽的使用方法
10-17
主要介绍了Vue 匿名、具名和作用域插槽的使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
思维导图源文件：vue插槽，具名插槽，默认插槽，作用域插槽，插槽prop
08-26
是vue插槽思维导图源文件，内容有：vue插槽，具名插槽，默认插槽，作用域插槽，插槽prop 定义： 让子组件接收不同的标签结构显示。（即：子组件挖坑，父组件决定坑里放什么内容） 渲染顺序： 取决于模板，不取决于父...
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
10-15
本篇文章将详细讲解Vue.js中单个插槽、具名插槽以及作用域插槽的使用方法和注意事项。 **单个插槽（Single Slot）** 单个插槽是最基础的插槽类型，它允许父组件向子组件传递内容。如果子组件模板中包含至少一个无...
vue学习笔记之作用域插槽实例分析
10-15
Vue.js 是一款流行的前端框架，它的模板语法和...理解并熟练运用 Vue 的作用域插槽，可以提升组件的复用性和灵活性，使得组件间的通信更加清晰，同时降低代码的复杂性。在实际开发中，这是一项非常实用且重要的技能。
【Vue】作用域插槽
看花容易绣花难
09-15 1474
作用域插槽
具名插槽的使用
m0_52765288的博客
10-22 2495
1.具名插槽的使用场景 当一个组件内有2处以上需要外部传入标签的地方 传入指定的插槽需要使用具名插槽 2.使用方式 使用具名插槽 只需要在插槽后面加上name属性 使用template传入不同的插槽名字即可 子组件中的代码如下： <template> <el-card> <div class="page-tools"> <!-- 左侧 --> <div class="left"> ...
微信小程序授权登录和获取手机号功能（详细）
2401_83916355的博客
03-30 2279
请依次允许获得你的公开信息及手机号码请升级微信版本（四）index.wxss.header {.content {.operBtns{important;important;*/（三）index.jsPage({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。AuthorizedLogin: ‘授权登录’,
Vue作用域插槽
鸟人的博客
07-25 552
Vue中如果想要父组件使用子组件属性，可以使用作用域插槽。
Vue插槽详解-作用域插槽
weixin_40923809的博客
09-30 2156
前言 在Vue的官方文档中对于插槽的描述比较凝练不容易理解，作者在刚开始接触插槽时也是一头雾水，在实践中好像也可以简单的使用，但是想把插槽用的得心应手就比较困难了。 最近因为工作需求需求手动封装一个类似ElementUI的级联选择器的组件，在开发过程中一直不太明白它的自定义节点功能： <el-cascader :options="options"> <template slo...
vue中插槽的具体使用（包含匿名、具名、作用域插槽的使用）
weixin_51376325的博客
07-13 444
因为想更详细的去了解插槽的使用，于是就去网上查找了各种资料看来看去还是存在着疑惑，在写具名插槽的时候为啥有些地方写v- slot、或者slot或者#代替呢，等等一系列问题。于是研究了一下，终于是搞明了。插槽（slot）是一种用于在父组件中向子组件传递内容的方式。插槽允许我们在子组件的特定位置插入父组件中的内容，以实现更灵活的组件复用，这是一种很好的封装组件方式。
vue slot插槽的使用
weixin_45563734的博客
03-15 342
vue slot插槽的使用
Vue中作用域插槽的使用
Xwz的博客
05-12 3796
Vue中的作用域插槽可以让父组件使用插槽时的内容能够访问子组件中的数据，数据在组件自身，但是根据数据生成的结构需要组件的使用者来决定。 这里可以先看一个例子，以便更好的理解作用域插槽的作用，在子组件中使用v-for创建一个列表循环，然后在父组件中通过子组件标签category调用，如下例。 category子组件： <template> <div class="category"> <ul> <li v-for="(g,inde
【Vue插槽详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
03-15 2万+
个人对Vue中插槽的见解，详细的介绍了不同种类的插槽方法，以及不同类型的插槽作用
vue中具名插槽和作用域插槽
07-25
在Vue.js中，有两种类型的插槽：具名插槽和作用域插槽。 1. 具名插槽（Named Slots）： 具名插槽允许您在组件中定义多个插槽，并在使用组件时根据插槽名称分发内容。这样可以更灵活地控制组件的结构和内容。具名插槽可以通过`<slot>`元素的`name`属性来定义，并且在使用组件时使用相应的`<template>`元素来填充内容。 示例： ```html <!-- MyComponent.vue --> <template> <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template> <!-- 使用 MyComponent.vue --> <template> <my-component> <template v-slot:header> <!-- 插入头部内容 --> </template> <!-- 默认插槽 --> <!-- 插入主要内容 --> <template v-slot:footer> <!-- 插入底部内容 --> </template> </my-component> </template> ``` 2. 作用域插槽（Scoped Slots）： 作用域插槽允许您将父组件中的数据传递给子组件，并在子组件中自定义渲染逻辑。这使得子组件更加灵活和可配置。作用域插槽通过使用`<slot>`元素的`name`属性和`v-slot`指令来定义，并在使用组件时传递数据给插槽。 示例： ```html <!-- MyComponent.vue --> <template> <div> <slot name="item" v-for="item in items" :item="item"></slot> </div> </template> <!-- 使用 MyComponent.vue --> <template> <my-component> <template v-slot:item="slotProps"> <!-- 使用 slotProps.item 渲染每个项目 --> </template> </my-component> </template> ``` 这样，父组件中的`items`数组的每个元素都会传递给子组件中的作用域插槽，子组件可以根据传递的数据进行自定义渲染。 希望以上解释对您有所帮助，如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值