vue插槽理解
1.插槽作用:父向子传递一段Html代码块
2.分类:
(1)默认插槽:规则:父给子传,用父,不传,用子。
(2)具名插槽:适用于一个页面有多个插槽时,需要做区分,使用name属性。给插槽取个名字
(3)作用域插槽:使用子组件的数据,传到父,在父改变此值,会改变子得数据。(也可使用name属性)
默认插槽:
// father.vue
<child>
<template>
<p>插槽内容1111</p>
</template>
</child>
// child.vue
<slot></slot> // 页面渲染内容为 -> 插槽内容1111
具名插槽
父组件定义插槽name,子组件使用v-slot="name"(也可写成#name)接收对应插槽,可自定义插槽插入位置
// father.vue
<child>
<template v-slot="head">
<p>head插槽内容</p>
</template>
<template v-slot="body">
<p>body内容</p>
</template>
</child>
// child.vue
<div class="header">
<slot name="head"></slot>
</div>
<div class="content">
<slot name="body"></slot>
</div>
作用域插槽
子组件定义数据通过slot传递到父组件,父组件通过slotProps(自定义名称)接收插槽传递的数据
// child.vue
<slot name="footer" :datas="user"></slot>
<script>
data(){
return{
user:{
name: 'Tom',
age: 20
}
}
}
</script>
// father.vue
<template v-slot:footer="slotProps">
<p>{{slotProps.datas.age}}</p>
</template>
以上代码部分为个人理解,如有遗漏或不恰,望各位大佬指点,谢谢
vue插槽理解的更多相关文章
- Vue插槽的深入理解和应用
一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...
- Vue插槽:(2.6.0以后版本弃用slot和slot-scope,改用v-slot)
关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...
- Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- Vue插槽的另外一些特性
之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...
- 学习笔记:Vue——插槽
关于Vue插槽,只用过最简单的语法,现在完整地走一遍官方文档说明,并且探索更多用法. 01.如果组件中没有包含一个<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃. 0 ...
- vue插槽用法(极客时间Vue视频笔记)
vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 关于Vue的理解以及与React框架的对比
1.Vue的理解 概念: Vue是一套用于构建用户界面的渐进式框架: Vue的核心库只关注视图层: 是一个数据驱动的MVVM框架: 特性: 确实轻量:体积比较小: 数据绑定简单.方便: 有一些简单的内 ...
- vue插槽slot的理解与使用
一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...
- vue 插槽 ------ slot 简单理解
solt 插槽 内容分发 什么是插槽 Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口. 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就 ...
随机推荐
- CentOS 8.4安装Docker
前言: Docker 是一个用于开发.传送和运行应用程序的开放平台.Docker 使您能够将应用程序与基础设施分开,以便您可以快速交付软件.使用 Docker,您可以像管理应用程序一样管理基础设施.通 ...
- 使用json.net实现复杂对象转换为QueryString
目标:生成复杂对象的QueryString,比如 new { Field1 = 1, Field2 = new { Field3 = "2", Field4 = new[] { n ...
- [atAGC051C]Flipper
对于这一个平面用$a_{x,y}$来表示,即$(x,y)$为黑色则$a_{x,y}=1$,否则$a_{x,y}=0$,之后定义$a$能生成$b$当且仅当$a$能够通过若干次操作后得到$b$ 令$p_{ ...
- PaintHouse I
ColorCostDP.hpp // // Created by Administrator on 2021/7/21. // #ifndef C__TEST01_COLORCOSTDP_HPP #d ...
- Secant 方法求方程多个根
Secant 方法介绍 Secant Method 函数 Secant_Methods 简介 1.函数定义 [c, errColumn] = Secant_Method(f, a, b, N, con ...
- Linux图片查看软件ImageMagick安装
在Linux中查看图片,这个需求是非常常见的.总不至于在集群中生成个图片,随便看下效果,也要用filezilla.winscp之类的远程文件传输工具导过来导过去吧,这样效率太低. Linux图片查看常 ...
- R语言与医学统计图形-【17】ggplot2几何对象之热图
ggplot2绘图系统--heatmap.geom_rect 这里不介绍更常见的pheatmap包. 1.heatmap函数 基础包. data=as.matrix(mtcars) #接受矩阵 hea ...
- Nginx+uwsgi+django+vue部署项目
购买服务器 # 购买阿里云服务器 # 短期或是测试使用,创建 按量收费 服务器,可以随时删除,删除后不再计费,但要保证账户余额100元以上 连接服务器 1)账号 >: ssh root@39.9 ...
- python生成器浅析
A 'generator' is a function which returns a generator iterator. It looks like a normal function exce ...
- Shell变量与算术运算
区分两个 Shell Shell 语言与 Shell 解释器 Shell 语言 写 Shell 脚本使用的是 Shell 语言,Shell 既是一种命令语言,又是一种程序设计语言. 作为命令语言,它交 ...