VUE学习(二十)、插槽

已于 2022-02-08 13:04:55 修改
阅读量313 收藏 1
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript 前端框架
于 2022-02-08 13:01:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/122821808
版权

VUE学习(二十)、插槽

一、默认插槽

1、Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

2、App.vue

<template>
    <div class="container">
        <Category title="美食">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
        </Category>

        <Category title="游戏">
            <ul>
                <li v-for="(g, index) in games" :key="index">{{ g }}</li>
            </ul>
        </Category>

        <Category title="电影">
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </Category>
    </div>
</template>

<script>
import Category from "./components/Category";
export default {
    name: "App",
    components: { Category },
    data() {
        return {
            foods: ["火锅", "烧烤", "小龙虾", "牛排"],
            games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
            films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《xxx大学》"]
        };
    }
};
</script>

二、具名插槽（带名字）

1、Category.vue

<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
        <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
        <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
    </div>
</template>

<script>
export default {
    name: "Category",
    props: ["title"]
};
</script>

2、App.vue

<template>
    <div class="container">
        <Category title="美食">
            <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
            <a slot="footer" href="http://www.zuijin.com">更多美食</a>
        </Category>

        <Category title="游戏">
            <ul slot="center">
                <li v-for="(g, index) in games" :key="index">{{ g }}</li>
            </ul>
            <div class="foot" slot="footer">
                <a href="http://www.zuijin.com">单机游戏</a>
                <a href="http://www.zuijin.com">网络游戏</a>
            </div>
        </Category>

        <Category title="电影">
            <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
            <template v-slot:footer>
                <div class="foot">
                    <a href="http://www.zuijin.com">经典</a>
                    <a href="http://www.zuijin.com">热门</a>
                    <a href="http://www.zuijin.com">推荐</a>
                </div>
                <h4>欢迎前来观影</h4>
            </template>
        </Category>
    </div>
</template>

<script>
import Category from "./components/Category";
export default {
    name: "App",
    components: { Category },
    data() {
        return {
            foods: ["火锅", "烧烤", "小龙虾", "牛排"],
            games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
            films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《xxx大学》"]
        };
    }
};
</script>

三、作用域插槽

1、Category.vue

<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <slot :games="games" msg="hello">我是默认的一些内容</slot>
    </div>
</template>

<script>
export default {
    name: "Category",
    props: ["title"],
    data() {
        return {
            games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"]
        };
    }
};
</script>

2、App.vue

<template>
    <div class="container">
        <Category title="游戏">
            <template scope="zuijin">
                <ul>
                    <li v-for="(g, index) in zuijin.games" :key="index">{{ g }}</li>
                </ul>
            </template>
        </Category>

        <Category title="游戏">
            <!-- {games} 是解构赋值写法 -->
            <template scope="{games}">
                <ol>
                    <li style="color:red" v-for="(g, index) in games" :key="index">{{ g }}</li>
                </ol>
            </template>
        </Category>

        <Category title="游戏">
            <template slot-scope="{ games }">
                <h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>
            </template>
        </Category>
    </div>
</template>

<script>
import Category from "./components/Category";
export default {
    name: "App",
    components: { Category }
};
</script>

四、插槽总结

插槽

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默认插槽：

      父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

    2. 具名插槽：

      父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

    3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：

        父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

推荐阅读

VUE笔记文章列表

1、VUE学习(一）、基于简单js引入的Vue快速入门——简单实例使用_醉瑾_的博客-CSDN博客

2、VUE学习(二)、计算属性vs侦听属性——基于案例的对比_醉瑾_的博客-CSDN博客

3、VUE学习(三)、绑定样式——class和style_醉瑾_的博客-CSDN博客

4、VUE学习(四)、条件渲染——v-if与v-show_醉瑾_的博客-CSDN博客

5、VUE学习(五)、列表渲染之：key原理、列表过滤、列表排序_醉瑾_的博客-CSDN博客

6、VUE学习(六)、vue 监测数据改变原理_醉瑾_的博客-CSDN博客

7、VUE学习(七)、收集表单数据_醉瑾_的博客-CSDN博客

8、VUE学习(八)、过滤器_醉瑾_的博客-CSDN博客

9、VUE学习(九)、内置指令、自定义指令_醉瑾_的博客-CSDN博客

10、VUE学习(十)、生命周期_醉瑾_的博客-CSDN博客

11、VUE学习(十一)、组件——非单文件组件、单文件组件_醉瑾_的博客-CSDN博客

12、VUE学习(十二)、vue脚手架的使用_醉瑾_的博客-CSDN博客

13、VUE学习(十三)、ref属性、props配置项、minix混入、自定义插件、scoped样式_醉瑾_的博客-CSDN博客

14、VUE学习(十四)、TodoList案例（基于props实现组件间通信通）_醉瑾_的博客-CSDN博客

15、VUE学习(十五)、组件自定义事件及todoList案例自定义事件完成_醉瑾_的博客-CSDN博客

16、VUE学习(十六)、全局事件总线及TodoList案例事件总线实现_醉瑾_的博客-CSDN博客

17、VUE学习(十七)、Vue封装的过度与动画_醉瑾_的博客-CSDN博客

18、VUE学习(十八)、VUE脚手架配置代理_醉瑾_的博客-CSDN博客

19、VUE学习(十九)、Github用户搜索案例_醉瑾_的博客-CSDN博客

心醉瑶瑾前
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue学习之slot插槽
01-07
(1)在components文件中创建slot.vue组件 插槽测试 我是最底部 (2)在demo中调用组件 slot插槽 ---------------------------- 123 456 789 //slot比较特殊，所以导入的时候不能直接写slot import slots ...
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
vue系列之 插槽(Slot) 详解
共同学习，共同成长
05-28 2793
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
vue学习笔记之作用域插槽实例分析
12-28
本文实例讲述了vue学习笔记之作用域插槽。分享给大家供大家参考，具体如下： <child></child> Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: ' ...
vue学习笔记之slot插槽用法实例分析
10-15
Vue.js 是一个流行的前端框架，它提供了一种强大的机制来实现组件间的动态内容插入，这就是所谓的`slot插槽`。在Vue中，插槽允许父组件向子组件传递内容，并在子组件模板的特定位置进行渲染。让我们深入探讨一下`...
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 909
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
07-24 556
Vue.js 是一个流行的JavaScript框架，因此，确保其组件按预期工作至关重要：有效，更重要的是，可靠。模拟依赖项是最有效的测试方法之一，我们将在本文中发现。模拟依赖项的必要性模拟依赖项是一种对测试施加控制的方法，它提供了将受测组件与其依赖项隔离开来的能力。由于所有框架都使用多个组件，这些组件的范围可以从 API 到服务，甚至是单击或悬停等交互，因此能够...
js-vue中多个按钮状态选中类似于复选框与单选框实现
2301_76671906的博客
07-24 346
js-vue中多个按钮状态选中类似于复选框与单选框实现
谷粒商城实战笔记-55-商品服务-API-三级分类-修改-拖拽数据收集
epitomizelu的专栏
07-24 1547
这一节的主要内容是收集拖拽后的要更新的节点的数据，逻辑比较复杂。所有这些数据都用收集到，然后发送给后台更新。拖拽结束后，触发拖拽结束事件，所以要在el-tree上绑定这个事件。事件函数nodeDrop定义如下。
Vue中!.和?.是什么意思
ggq53219的博客
07-25 764
在Vue（或更广泛地说，在JavaScript和TypeScript中），!和?是两个与可选链（Optional Chaining）和断言非空（Non-null Assertion）相关的操作符，它们分别用于处理可能为null或undefined的值，以避免运行时错误。?
vue3中父子组件的双向绑定defineModel详细使用方法
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
07-24 1357
组件之间通讯，通过 props 和 emits 进行通讯，是单向数据流， 子组件不能改变父组件传递给它的 prop 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。 为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API
el-table实现合并单行表头并设置背景色
青莳的博客
07-24 286
el-table实现合并单行表头并设置背景色
一文讲透useMemo和useCallback
feixin369的博客
07-24 1055
相同点：useCallback 和 useMemo 都是性能优化的手段，类似于类组件中的 shouldComponentUpdate，在子组件中使用 shouldComponentUpdate， 判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。不同点：useCallback 和 useMemo 的区别是useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 779
本文介绍了电子签名、图片合成、及预览功能
vue3前端开发-小兔鲜项目-form表单的统一校验
yrldjsbk的博客
07-25 253
vue3前端开发-小兔鲜项目-form表单的统一校验！实际上，为了安全起见，用户输入的表单信息，要满足我们的业务需求，参数类型等种种标准之后，才会允许用户向服务器发送登录请求。为此，有必要进行一次form表单的全局校验。也为后面的是否发送登录业务请求作为判定依据。之前我分享的内容文章里介绍过这个ref是一个钩子函数，用它，可以获取到标签对象的内容。有了这个基础数据，我们后面就可以写登录发送请求的判定逻辑了。1：使用钩子函数，ref.获取到form的表单对象。内容比较简单，看代码就懂了。
高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
RenGJ010617的博客
07-23 1201
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外，mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。
谷粒商城实战笔记-54-商品服务-API-三级分类-拖拽效果
epitomizelu的专栏
07-24 823
这个函数接受三个参数，分别代表正在拖动的节点、可能的放置目标节点以及放置位置。el-tree控件加上允许拖拽的属性draggable，此外还需要根据层级判断是否能拖动，通过给allow-drop绑定事件allowDrag实现这个需求。类型的对象，表示当前正在被拖动的节点。它包含了关于拖动节点的所有信息，如节点的数据、状态等。如果拖动过程中没有特定的放置目标（例如，拖动到树的空白区域），这个参数可能是。，分别表示拖动的节点将放置在目标节点之前、之后或内部。类型的对象，表示潜在的放置目标节点。
vue3响应式转换常用API
最新发布
fyw1789的博客
07-25 489
这个 API 实际上是一个语法糖： val = isRef(val)?unRef: 如果参数给的是一个 ref 值，那么就返回内部的值，如果不是 ref，那么就返回参数本身。toRefs：将一个响应式对象转为一个普通对象，普通对象的每一个属性对应的是一个 ref 值。接收一个对象（不论是响应式的还是普通的）或者一个 ref，返回一个原来值的只读代理。toRef：基于响应式对象的某一个属性，将其转换为 ref 值。这个 API 和前面介绍的 unref 比较相似。
Vue路由
m0_67496588的博客
07-24 410
Vue路由，管理系统页面
Vue2与Vue3学习精要：组件通信、插槽与路由传参
"Vue2+Vue3学习笔记，涵盖了Vue框架的关键知识点，包括生命周期、数据绑定、组件创建、属性传递、事件通信、插槽机制、路由传参等" Vue.js是前端开发中常用的JavaScript框架，本笔记主要关注Vue2和Vue3的共性和差异...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

心醉瑶瑾前

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

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

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

打赏作者

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

抵扣说明：

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

余额充值