总结/笔记-vue中的插槽(默认插槽、具名插槽、作用域插槽)

问题:

遇到了一个插槽,写法为 #default = ”{ row }“

插槽知识点:

定义

插槽,用于 在组件中 引用外部组件或自定义组件的内容。

即 子组件中提供给父组件使用的一个占位符,父组件可以在这个占位符中填充任何模板代码,填充的内容会替换子组件的标签。插槽的显不显示、如何显示是由父组件控制,插槽在哪显示子组件控制。

1. 默认插槽

v-slot:default#default,可省(name属性可以不写,即未定义名字的插槽

数据流:父组件 -> 子组件

例:引用子组件时,在子组件中插入一段内容,代码如下

在父组件中的传入要插到子组件的内容

2. 具名插槽

具名插槽,即 给插槽起名,给<slot></slot>定义一个name属性。

数据流:父组件 -> 子组件

作用:一个子组件可以放个插槽,父组件填充内容时,根据名字把内容填充到对应插槽中。

父组件 可以用 v-slot:name #name 往插槽中填充内容。

#插槽名  v-slot:插槽名 的简写形式

例子:

3. 作用域插槽

作用域插槽:带数据的插槽,即带参数的插槽。子组件提供给父组件参数,该参数仅限于插槽中使用,父组件可以根据子组件传过来的插槽数据 来进行不同方式的展示/填充插槽内容。

父组件通过 v-slot: 属性名 = “slotProps” 的slotProps(接受的变量)来获取子组件传出的属性,子组件中通过<slot  v-bind=属性名:"值"  name=“值”>来传递子组件的数据,数据存于 值 中

数据流:子组件 -> 父组件

适用场景:在父组件中访问子组件的数据;子组件的某部分数据,每个父组件都有不同方式/样式的呈现形式。

例子:

在<slot>上使用 v-bind绑定了 vue data 中的定义的数据。

总结与拓展:

1. slot 存在于 子组件,v-slot 在父组件,最终页面展示结果是父组件。

2. 可以通过解构获取 v-slot = { user },也可重命名 v-slot = “{ user: newName }” 和定义默认值 v-slot = “{ user = '默认值' }”

3. 插槽名 可以动态变化的 v-slot: [slotName]

注:

1. 默认插槽 dafault,可以省略default 直接写 v-slot,缩写为#时不能不写参数,要写成#default

2. 多个插槽混用时,v-slot不能省略default

软件开发原则:多扩展,少修改。

v-slot插槽的位置:

更推荐 将插槽 v-slot 写在<template>元素上,其处理过程不会渲染成真实的DOM节点。

也可用于其他HTML元素上,这样最终插入到子组件会有真实的DOM节点包裹。

另一说法表示,v-slot 属性只能在template上使用,只有默认插槽可以在组件标签上使用。(2020)

问题解决

片头提到的问题:  #default = ”{ row }“,为缩写的默认插槽,即 v-slot:defalut = "{ row }",其解构了,也对其进行重命名或定义默认值。

参考:详解Vue中的插槽用法:默认插槽、具名插槽、作用域插槽 - 掘金 (juejin.cn)

VUE作用域插槽详解(<slot>、v-slot、slot-scope)_别来打扰我的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/99208.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java8实战-总结18

Java8实战-总结18 使用流筛选和切片用谓词筛选筛选各异的元素截短流跳过元素 使用流 流让你从外部迭代转向内部迭代。这样&#xff0c;就用不着写下面这样的代码来显式地管理数据集合的迭代(外部迭代)了&#xff1a; List<Dish> vegetarianDishes new ArrayList<>…

ToBeWritten之威胁狩猎

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…

OpenCV(十四):ROI区域截取

在OpenCV中&#xff0c;你可以使用Rect对象或cv::Range来截取图像的感兴趣区域&#xff08;Region of Interest&#xff0c;ROI&#xff09;。 方法一&#xff1a;使用Rect对象截取图像 Rect_(_Tp _x&#xff0c; _Tp _y&#xff0c; _Tp _width,_Tp _height) Tp:数据类型&…

聚观早报|多邻国推出进阶英文课程;电动汽车成本将高于燃油车

【聚观365】9月5日消息 多邻国即将推出进阶英文课程 未来电动汽车成本仍将高于燃油车 戴尔科技2024财年第二季度营收229亿美元 现代汽车电动汽车销量在8月份环比继续下滑 马斯克称将用X数据训练AI 多邻国即将推出进阶英文课程 语言学习平台多邻国宣布&#xff0c;为了满…

linux入门---动静态库的加载

目录标题 为什么会有动态库和静态库静态库的实现动态库的实现动静态库的加载 为什么会有动态库和静态库 我们来模拟一个场景&#xff0c;首先创建两个头文件 根据文件名便可以得知add.h头文件中存放的是加法函数的声明&#xff0c;sub.h头文件中存放的是减法函数的声明&#…

postman json复杂数据的模拟

先设置路径 然后可以定义下边数据&#xff08;Key value&#xff09; 也可以不定义 看你的情况 [{"mac": "4C-77-66-19-50-65","addressPattern": "98jd","platform": "ios","registrationId": "…

java 浅谈ThreadLocal底层源码(通俗易懂)

目录 一、ThreadLocal类基本介绍 1.概述 : 2.作用及特定 : 二、ThreadLocal类源码解读 1.代码准备 : 1.1 图示 1.2 数据对象 1.3 测试类 1.4 运行测试 2.源码分析 : 2.1 set方法解读 2.2 get方法解读 一、ThreadLocal类基本介绍 1.概述 : (1) ThreadLocal&#xff0c;本…

计算机图形学线性代数相关概念

Transformation&#xff08;2D-Model&#xff09; Scale(缩放) [ x ′ y ′ ] [ s 0 0 s ] [ x y ] (等比例缩放) \left[ \begin{matrix} x \\ y \end{matrix} \right] \left[ \begin{matrix} s & 0 \\ 0 & s \end{matrix} \right] \left[ \begin{matrix} x \\ y \en…

十个响应式页面项目

十个响应式页面项目 上接 53 个特效&#xff1a; 53 个 CSS 特效 153 个 CSS 特效 253 个 CSS 特效 3&#xff08;完&#xff09; 照例&#xff0c;预览地址在 http://www.goldenaarcher.com/html-css-js-proj/&#xff0c;git 地址&#xff1a; https://github.com/Goldena…

qt creater11 翻译国际化教程教程:

先出效果图。 闲聊几句&#xff1a;qt这个翻译很方便&#xff0c;能直接导出项目里所有文字。 具体步骤如下&#xff1a; 在Qt中&#xff0c;我们可以使用QTranslator类来实现多语言切换。以下是一般步骤&#xff1a; 1. 在你的源代码中&#xff0c;所有需要翻译的字符串都…

Python的io模块

io 模块提供了 Python 用于处理各种 I/O 类型的主要工具。三种主要的 I/O类型分别为: 文本 I/O, 二进制 I/O 和 原始 I/O。 io.open() 是内置的 open() 函数的别名. 语法&#xff1a; open(file,moder,buffering-1,encodingNone,errorsNone,newlineNone,closefdTrue,openerN…

算法训练 第一周

一、合并两个有序数组 本题给出了两个整数数组nums1和nums2&#xff0c;这两个数组均是非递减排列&#xff0c;要求我们将这两个数组合并成一个非递减排列的数组。题目中还要求我们把合并完的数组存储在nums1中&#xff0c;并且为了存储两个数组中全部的数据&#xff0c;nums1中…