VUE——slot插槽 （特别重要，尤其是作用域插槽）
文章目录
- 求一键三连
- 重点
- 认识插槽
- 插槽的使用
- 多个插槽（具名插槽 name=''name" #name）
- 当图片路径较深时怎么办：使用@
- 渲染作用域
- 作用域插槽（插槽传递子组件属性）
- 子组件的操作：传递属性
- 父组件操作：接受属性并使用
求一键三连
希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！
重点
插槽在组件封装中特别有用，尤其是在组件库项目中，因为之前没有复习插槽，导致很多东西都特别难以实现，卡了很多天。
但是只要使用了插槽，具名插槽，作用域插槽，很多东西都迎刃而解，插槽让组件封装变的更加灵活，也让组件库成为可能。
认识插槽
更加动态的使用组件
slot是占位，让父组件决定使用什么元素。
slot是给有不同需要的时候用的
插槽的使用
在子组件中间放入需要插入的东西，和子组件插槽的位置是对应上的。
子组件：在template中默认值 表示这是一个插槽
父组件:
<show-message title="哈哈哈"><button>我是按钮元素</button> //此时插槽中放的就是按钮</show-message>
插槽是可以设置默认值的，在slot里面写上内容就是没有传递东西时的默认值
多个插槽（具名插槽 name=''name" #name）
如果不命名直接用，则在调用子组件时放入的html元素全都放在一个插槽内。
（2023.2.4 因为忘记了这个具名插槽，所以效果一直很差，一定要好好复习，别总想往前走！）
如何使用，在父组件中调用子组件时，在子组件中写<template v-solt:插槽名>具体的东西
子组件： <slot name="left">left</slot> 在插槽上写上name
父组件： 推荐用# 且特别注意只能写在一个template上面
<nav-bar>
<template #left>//这里用#插槽名来表示对应插槽名<button>{{leftcontent}}</button>
</template>
或者
<template v-slot:right> //v-slot：插槽名<a href="#">登录</a>
</template>
动态插槽（做个了解）
当图片路径较深时怎么办：使用@
@/img/图片.jpg 这样就是先找到img文件夹然后再找图片
渲染作用域
简单就是每个组件里面的内容都必须在本组件中定义使用，无法跨组件调用。
在本组件中编写的，那么用到的数据都必须是本组件中的数据
例子：
在刚才具名插槽中，有一个插槽在父组件中是按钮，按钮的内容是{{leftText}},那么这个模板语法的内容leftText必须是在父组件app.vue中定义好的，也就是它的数据必须在本组件中定义。
虽然它最后展示是在子组件中展示，但是它是在父组件中使用的，所以必须在父组件中定义。
作用域插槽（插槽传递子组件属性）
我们希望对之前的案例做一个更改，之前案例的子组件中格式都是写死的，都是在子组件中定义好的，比如说都是span，并没有使用插槽，那么我们希望可以使用插槽来进行更改，可以由父组件决定是span或者说按钮等内容。
首先是使用插槽，那么span就变为默认值，如果没有使用插槽则默认为span
<slot ><span>{{ item }}</span></slot>
那么就有一个问题：子组件中for循环的item如何传递给父组件
(这个真的特别重要，因为不记得作用域插槽的用法，在自己封装组件的时候卡了好几天，基础真的太重要了)
父组件插槽原来是这样的，这个item我们拿不到
所以我们要解决的就是一个插槽传递信息的问题，在使用的插槽的时候可以把子组件的数据传出来
我们传递给插槽。
子组件的操作：传递属性
在插槽上写： 用：绑定一个属性传递出去 :item=“要传递的属性”
这里呢也有一个注意事项，那就是：
在vue中，动态绑定的属性都要加冒号：
而静态属性则不用，比如这里的abc=“cba”,它就是静态的
但是对于item来说它是动态的，所以必须要加冒号：
<slot :item="item" abc="cba"><span>{{ item }}</span></slot>
父组件操作：接受属性并使用
用template #：插槽名=“接受属性名” 在这里默认使用props命名（可以用其他命名）
这里的props包含了该插槽所有传递出来的属性，包括item和abc
之后就可以在template中使用接受到的数据了props.item
<template v-slot:name="props"><button>{{ props.item }}</button></template>
//另一种写法<template #name="props"><button>{{ props.item }}</button></template>在这里呢，就可以不写具名，就是#=“props”，因为此时看只有一个默认插槽！
这个应用场景真的就非常实际，很常见，老师讲的都是实际开发的例子
语法糖：
如果只有一个默认插槽, 那么template可以省略,因为没有必要写template，不需要具名
#=“props”
特别注意最后 一个，只要出现多个插槽，请始终为所有的插槽使用完整的基于template的语法。
重写案例错误;
template中是不可以写后面这些的，因为无法监听到必须要写到模板里的具体元素里
template标签内容天生不可见，设置了display：none；
正确的写法：
VUE——slot插槽 （特别重要，尤其是作用域插槽）相关推荐
- Vue中的v-slot详解，作用域插槽和具名插槽
1.具名插槽 有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场. //组件调用时 <MyFooter v-red :age.sync="age"> ...
- Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
- [vue] slot插槽 默认插槽，具名插槽，作用域插槽
文章目录 插槽 不使用插槽 效果 分析 默认插槽 效果 分析 具名插槽 效果 分析 作用域插槽 效果 分析 再次理解作用域插槽 代码: 默认插槽: 具名插槽 作用域插槽 插槽 作用:让父组件可以向子组 ...
- vue slot scope使用_20、slot插槽的用法
重点: 单个插槽.具名插槽.作用域插槽的用法: 访问插槽的方法. 其实本小白对插槽理解的还不深,哪些场景会经常用到插槽也不了解. 但是本着"大胆猜测"的理念,我的猜测如下: 假设有 ...
- Vue基础学习笔记Day06_动态组件_插槽_自定义指令
今日目标: 能够了解组件进阶知识 能够掌握自定义指令创建和使用 学习内容: 学习目录: 组件进阶 自定义指令 今日总结 面试题 知识点自测 组件创建, 注册和使用 - 伸手就来特别熟练 指令的作用 1 ...
- 组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽
组件插槽的作用 组件插槽:父组件向子组件传递内容 <!DOCTYPE html> <html lang="en"> <head><meta ...
- vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
- Vue slot 详解
在Vue中,我们使用组件来组织页面和组织代码,类似于搭积木,每一个组件都是一个积木,使用一些相同或者不同组件就能搭建出我们想要的页面.slot(插槽)是组件功能的重要组成部分,插槽必须用于组件才有意义 ...
- Vue中slot的使用(具名插槽与作用域插槽)
文章目录 前言 一.什么是插槽 二.前期准备 三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结 四.作用域插槽的使用 1.子组件配置slot ...
最新文章
- python渲染html页面_从零开始学Python - 第031课：用Python解析HTML页面
- 【知识积累】SBT+Scala+MySQL的Demo
- Rational rose中实心菱形的画法
- Eclipse使用Android2.3和3.0的SDK
- 木糖醇、可口可乐零度：可怕的传闻
- HTML对字体的操作详解
- 如何优雅的链式取值之 MayBe 函子
- web前端工作笔记008---js延迟执行代码
- HIT Software Construction Review Notes（3-1 Data Type and Type Checking）
- java应用商店,API for Java 8
- C++ STL getline函数
- 一天一个设计模式：工厂方法模式
- 证券基金行业那些智能XX（上）
- 网络营销之百度营销技巧(一) 百度知道推广日常手册
- 斐讯K2刷华硕固件教程（最新）
- Creo：Creo2.0安装实例教程之图文详细攻略
- EditText的属性介绍
- PS怎样去掉图片上的文字
- P2655 2038年问题
- Sia(Siacoin/SC/云储币)去中心化存储平台网址汇总