Vue之slot插槽和作用域插槽

最新推荐文章于 2021-10-18 14:57:56 发布
最新推荐文章于 2021-10-18 14:57:56 发布
阅读量1k 收藏 1
点赞数
分类专栏： Vue2 文章标签： vue slot 插槽 作用域插槽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x550392236/article/details/78533205
版权

文章目录

没有插槽的情况

<div id="app">
    <child>
        <span>1111</span>    
    </child>
</div>


<script>
    // 注册子组件
    Vue.component("child", {
        template: "<div>这是一个div标签</div>"
    });

    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

模版里的 span标签 会被替代成 “<div>这是一个div标签</div>” 如下图：

这里写图片描述

Vue2.x 插槽

有插槽的情况

简单来说，使用 slot标签 ，可以将<span>1111</span>，放到子组件中想让他显示的地方。如下图：

<div id="app">
    <child>
        <span>1111</span>    
    </child>
</div>


<script>
    // 注册子组件
    Vue.component("child", {
        template: "<div>这是<slot></slot>一个div标签</div>"
    });

    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

这里写图片描述

即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了<slot></slot>这个标签。如下图：

<div id="app">
    <child>
        <span>1111</span>   
        <i>2222</i>
        <b>3333</b>
    </child>
</div>


<script>
    // 注册子组件
    Vue.component("child", {
        template: "<div>这是<slot></slot>一个div标签</div>"
    });

    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

这里写图片描述

具名插槽

  1. 父组件在要分发的标签里添加 slot="xxx" 属性
  2. 子组件在对应分发的位置的 slot标签 里，添加 name="xxx" 属性
  3. 然后就会将对应的标签放在对应的位置了。如下图：
<div id="app">
    <child>
        <span slot="one">1111</span>
        <i slot="two">2222</i>
        <b slot="three">3333</b>
    </child>
</div>


<script>

    // 注册子组件
    Vue.component("child", {
        template:   `<div>
                        这是
                        <slot name='one'></slot>
                        一个
                        <slot name='two'></slot>
                        div
                        <slot name='three'></slot>
                        标签
                    </div>`
    });


    // 初始化父组件
    new Vue({
        el: "#app"
    });
</script>

这里写图片描述

没有slot属性

如果子组件标签中没有slot属性，将会显示默认的值

    <div id="app">
        <child>
            <!-- <span slot="one">1111</span> -->
            <i slot="two">2222</i>
            <!-- <b slot="three">3333</b> -->
        </child>
    </div>

    <script>
        // 注册子组件
        Vue.component("child", {
            template:   `<div>
                            <slot name='one'>no one</slot>
                            <slot name='two'>no two</slot>
                            <slot name='three'>no three</slot>
                        </div>`

        });

        // 初始化父组件
        new Vue({
            el: "#app"
        });
    </script>

slot="two" 就被插到固定的位置上，如下图：

这里写图片描述

插槽简单实例应用

想想你的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，其模板是template ，如下：

<body>
    <div id="app">
        <computer>
            <div slot="CPU">Intel Core i7</div>
            <div slot="GPU">GTX980Ti</div>
            <div slot="Memory">Kingston 32G</div>
            <div slot="Hard-drive">Samsung SSD 1T</div>
        </computer>
    </div>

    <script>
        // 注册子组件
        Vue.component("computer", {
            template:   `<div>
                            <slot name="CPU">这儿插你的CPU</slot>
                            <slot name="GPU">这儿插你的显卡</slot>
                            <slot name="Memory">这儿插你的内存</slot>
                            <slot name="Hard-drive">这儿插你的硬盘</slot>
                        </div>`
        });

        // 初始化父组件
        new Vue({
            el: "#app"
        });
    </script>
</body>

这里写图片描述

作用域插槽 ( 2.1.0 新增 )

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

  1. 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样
  2. 在父组件中，通过 slot-scope="scoped" 的形式，获取子组件传递过来的数据，该数据对象的别名为 scoped。这就是作用域插槽的模板。
<div id="app">
    <child>
    	<!-- 2. 接收myName数据，scoped 为 { "myName": "猫老板的豆" } -->
        <template slot="content" slot-scope="scoped"> 
            <div>{{ scoped.myName }}</div>
        </template>
    </child>
</div>

<script>
	Vue.component('child', {
		data () {
			return {
				myName: '猫老板的豆'
			}
		},
		template: `<slot name="content" :myName="myName"></slot>`   // 1. 对外抛出 myName 数据
	})
	
	new Vue({
		el: "#app"
	});
</script>

Vue3.x 插槽

插槽

<!-- 父组件 -->
<template>
	<Child>
		<!-- Vue2.x写法
		<div slot="parent">
            <div>父组件</div>
		</div>
		 -->
		<template v-slot:parent>
            <div>父组件</div>
        </template>
	</Child>
</template>


<!-- 子组件 -->
<template>
	<slot name='parent'>子组件</slot>
</template>

作用域插槽

在 Vue2.x 中具名插槽和作用域插槽分别使用 slot 和 slot-scope 来实现， 在 Vue3.x 中将 slot 和 slot-scope进行了合并统一使用

父组件：

<template>
	<Child>
		<!-- <template slot="content" slot-scope="scoped">  -->
		<template v-slot:content="scoped">
			<div>{{scoped.myName}}</div>
		</template>
	</Child>
</template>

子组件：

<template>
	<slot name="content" :myName="myName"></slot>
</template>

<script>

import { ref } from 'vue'
export default {
	setup () {

		let myName = ref("猫老板的豆")

		return { myName }
	},
}
</script>
猫老板的豆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue标准插槽和作用域插槽区别与用法详解
全栈弄潮儿
10-25 444
本文将探讨Vue.js中的两种主要插槽类型：标准插槽和作用域插槽。我们将了解它们的不同用法和功能，以及何时使用每种插槽类型。标准插槽适用于静态内容的传递，而作用域插槽则用于动态渲染内容以及传递数据到子组件，并让子组件自定义渲染。帮助你更好地理解Vue.js的插槽机制，以便在构建组件时更好地选择适当的插槽类型。
vue系列之 插槽(Slot) 详解
最新发布
共同学习，共同成长
05-28 4355
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
例子讲解Vue.js的slot分发
sinat_35030910的博客
03-04 1163
slot出现的目的当我们使用我们自定义的组件时，我们希望我们自定义的组件能够适应很多场景，我们希望组件中能够在不同的场景有着不同的内容 而之前我们学过父组件与子组件之间的通信，它们是通过Vue的全局组件注册中的props来实现的 但是这样显得太过繁琐，而且当自组件中需要显示的内容是父组件中没有的，那就很尴尬了 所以，slot就产生了例子讲解统一的CSS.container{ margi
vue.js中使用slot
热门推荐
curry_zhao的博客
10-25 1万+
什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 Slot分发内容 ①概述： 简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是
vue.js的<slot>
weixin_33670713的博客
01-14 115
使用插槽分发内容在封装vue组件的时候，很多时候就不得不使用到vue的一个内置组件<slot>。slot是插槽的意思，顾名思义，这个<slot>组件的意义是预留一个区域，让其中的DOM结构可以由调用它的组件来渲染。 假设现在有一个people组件，结构如下： <template> <d...
Vue——Slot（插槽) 2019.03更新
lihaoen666的博客
09-30 470
使用方法 我们平常内容，都是在template里面定义的。但在template里面使用slot以后，可以直接在html的组件标签内写内容。实例1<div id = 'app'> <panel> nsdjkfn </panel></div><template id="panel-tpl"> <div class="panel"> <div cla
浅析vue插槽和作用域插槽的理解
10-17
Vue.js 是一款流行的前端JavaScript...了解和熟练运用插槽和作用域插槽，对于开发高效且可维护的Vue应用至关重要。在实际项目中，正确地使用这些特性，不仅可以提升代码的可读性和可扩展性，还能提高团队合作的效率。
Vue作用域插槽实现方法及作用详解
10-15
Vue 2.6版本之前使用的是作用域插槽的旧语法，即使用slot-scope属性来接收传递的prop。而从Vue 2.6版本开始，引入了新的v-slot指令（代替slot-scope）用于作用域插槽。 在新的作用域插槽语法中，我们给v-slot带一个...
Vue匿名插槽与作用域插槽的合并和覆盖行为
10-17
根据功能的不同，Vue插槽可分为匿名插槽（又称默认插槽）和具名插槽（又称作用域插槽）。本文将详细探讨Vue中这两种插槽类型如何合并和覆盖，并介绍一些使用建议。 首先，匿名插槽是最基本的插槽形式，它没有特定...
vuejs的插槽(slot)
zhangCheng的博客
04-06 478
1、概念: 我的理解是slot就是一个插槽,将父组件的html混入到子组件里面。 普通的slot，数据和数据的展现形式(html和样式),都由父组件决定,子组件只能决定出现的地方. 作用域slot,数据由子组件提供,展现形式有父组件决定,我感觉就是父组件把数据加工样式后,再替换掉子组件的slot标签元素。 2、普通slot 例子: <div id="app"> <my...
Vue.js中的插槽slot(具名插槽、作用域插槽)详解
YSJ_chengnan的博客
07-15 1410
Vue中的插槽slot插槽 - slot1.插槽的基本使用2.具名插槽的使用3.作用域插槽 插槽 - slot 优点：可以预留空间，提高组件的复用性； 1.插槽的基本使用 html代码如下： <div id="app"> <!--将h4标签中的内容替换到插槽中 --> <you><h4>替换的h4标签</h4></you> <!--不在插槽中添加值时，插槽会使用默认值 --> <you></yo
vue.js 种 slot的理解
weixin_41766191的博客
06-16 375
Slot的通俗理解 插槽就是动态交互父子组件之间的数据的机器臂 是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容； slot 使用 可以传递内容 也可以传递标签 理解： 1.假如子组件没有slot插槽，父组件的内容将被会丢弃 2.假如子组...
插槽二（默认，具名，作用域）
qq_44892120的博客
10-18 171
插槽 默认插槽 BiliBili.vue <div class="aside-wrap"> <h2>排行榜</h2> <!-- 插槽 --> <slot></slot> </div> App.vue <BiliBili> <ul> <li v-for="(aw,index) in awList" :key="index">
Vue.js组件——slot杂记
伏枫
11-12 810
懒得再写一遍，直接把我的笔记截图放上来了。截图的内容其实是自己写的测试代码最后的效果，下面把测试代码贴出来：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 组件slot</title> <script src="../js/vue.min.js"></script>
Vue.js_32_插槽（slot）的使用
魏宇轩
04-27 394
本系列博客汇总在这里：Vue.js 汇总 @TOC 源码工程文件为： 一、为什么使用插槽？ 在生活中很多地方都有插槽，电脑的 USB 插槽，插板当中的电源插槽。插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的 USB 我们可以插入 U 盘、硬盘、手机、音响、键盘、鼠标等等。 组件的插槽也是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。 例子：移动...
Vuejs——（11）组件——slot内容分发
weixin_41652466的博客
06-05 177
https://blog.csdn.net/sinat_17775997/article/details/52484072
vue.js插槽slot的相关使用
cbl1369732的博客
02-02 206
1.插槽slot的基本使用，插槽的使用目的是预留一个地方给其他人有自己的实现方式 如果你想在模板中有一部分需要预留出来就使用slot标签，如果你想写自己的实现代码你就在子组件的标签中写自己的实现内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vue。js插槽
王依米
05-18 563
不希望显示2遍就要在1.在插槽里定义 slot="header"&lt;div class="header" slot="header"&gt;header&lt;/div&gt;&lt;div class="footer" slot="footer"&gt;footer&lt;/div&gt;2.在slot里添加name='header'&am
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
发出的红包

打赏作者

猫老板的豆

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

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

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

打赏作者

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

抵扣说明：

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

余额充值