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,将 `` 元素作为承载分发内容的出口. 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就 ...
随机推荐
- 微信小程序(二)
创建项目: hello.wxml hello world 每个学习的开始 <view>hello world!</view> hello.js 像 app.js 一样 Page ...
- [cf1458D]Flip and Reverse
将$s$中的01分别变为$1,-1$,即得到一个序列$a_{i}$(设其长度为$n$,下标范围为$[1,n]$) 对$a_{i}$建立一张有向图,其点集合为$Z$,并对$\forall 0\le k& ...
- Web Api 宿主的搭建
首先我们要清楚一个概念,宿主.宿主是什么意思?先从了解一下Hosting开始吧! 有关Hosting的基础知识 Hosting是一个非常重要,但又很难翻译成中文的概念.翻译成:寄宿,大概能勉强地传达它 ...
- Codeforces 1442D - Sum(找性质+分治+背包)
Codeforces 题面传送门 & 洛谷题面传送门 智商掉线/ll 本来以为是个奇怪的反悔贪心,然后便一直往反悔贪心的方向想就没想出来,看了题解才发现是个 nb 结论题. Conclusio ...
- Atcoder Grand Contest 038 F - Two Permutations(集合划分模型+最小割)
洛谷题面传送门 & Atcoder 题面传送门 好久前做的题了--今天偶然想起来要补个题解 首先考虑排列 \(A_i\) 要么等于 \(i\),要么等于 \(P_i\) 这个条件有什么用.我们 ...
- 【转】群体研究套路:开心果denovo+重测序+转录组+群体进化+选择位点
转自公众号Eric生信小班.学习群体遗传套路 中科院昆明动物园吴东东研究团队联合国外研究团队2019年在Genome Biology发表题为Whole genomes and transcriptom ...
- 25-ZigZag Conversion
The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...
- a这个词根
a是个词根,有三种意思:1. 以某种状态或方式,如: ablaze, afire, aflame, alight, aloud, alive, afloat等2. at, in, on, to sth ...
- Could not get a resource from the pool
redis报错Could not get a resource from the pool情况是:1.可以连接redis2.可以keys *查看数据,但是发现key少了好多(其实原因就是大量的key过 ...
- Set && Map
ES6 提供了新的数据结构 Set, Map Set成员的值都是唯一的,没有重复的值,Set内的元素是强类型,会进行类型检查. let set = new Set([1, true, '1', 'tr ...