如何使用Vue中的slot
之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了,使用slot就是先圈一块地,将来可能种花种菜,也有可能在这块地上建房子。然而slot可以以一当十,可以插入很多东西。不知明白否?
由于项目经验有限,这篇我就先跟着官网的知识点走,当然会加入自己的部分项目代码。
关于slot是这样说的,
除非子组件模板包含至少一个 <slot>
插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。
最初在 <slot>
标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
假定 my-component
组件有下面模板:
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>
|
父组件模版:
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
|
渲染结果:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
|
除了上述问题,还可以,给出名称,具名slot。
难点在于作用域插槽的理解:
上面这样讲到,
作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。
在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样
<div class="child">
<slot text="hello from child"></slot>
</div>
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>
还有一个就是用于列表组件,允许组件自定义应该如何渲染列表每一项。
如何使用Vue中的slot的更多相关文章
- vue中的slot与slot-scope
深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解
- vue中的slot理解和使用
最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue ...
- Vue中的slot(占坑,预留位置)
Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...
- vue 中的slot属性(插槽)的使用
总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...
- vue中的slot(插槽)
vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...
- 深入理解vue中的slot与slot-scope
from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...
- Vue中的slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...
- Vue中插槽slot的使用
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...
- vue中的slot插槽
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...
- Vue中的slot
个人理解:是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参: Slot的通俗理解 是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自 ...
随机推荐
- How DRI and DRM Work
How DRI and DRM Work Introduction This page is intended as an introduction to what DRI and DRM are, ...
- brew安装MySQL V5.7
目录 安装 设置密码 启动 安装 brew install mysql@5.7 // 安装 brew link --force mysql@5.7 // 链接 brew services start ...
- 《C++ Primer》笔记 第4章 表达式
C++的表达式要不然是右值(right-value or read-value),要不然就是左值(left-value or location-value). 当一个对象被用作右值的时候,用的是对象的 ...
- 开发过程中遇到的js知识点总结,面试题等,持续更新
1.Object.freeze() 方法用于冻结一个对象,即将对象设置为不可扩展.将对象的所有自有的属性和方法(包括Symbol值的属性和方法)配置为不可配置,不可写. Object.freeze( ...
- 九. SpringCloud Stream消息驱动
1. 消息驱动概述 1.1 是什么 在实际应用中有很多消息中间件,比如现在企业里常用的有ActiveMQ.RabbitMQ.RocketMQ.Kafka等,学习所有这些消息中间件无疑需要大量时间经历成 ...
- Codeforces Round #557 B. Double Matrix
题面: 传送门 题目描述: 给出两个n*m的矩阵,问:是否能通过交换两个矩阵"对应"位置的元素,使两个矩阵都为"递增"矩阵. "递增"矩阵定 ...
- python网络编程TCP服务多客户端的服务端开发
#服务多客户端TCP服务端开发 2 #方法说明 3 """ 4 bind(host,port)表示绑定端口号,host是ip地址,ip地址一般不进 行绑定,表示本机的任何 ...
- P1422小玉家的电费(JAVA语言)
package 顺序与分支; /* * 题目描述 夏天到了,各家各户的用电量都增加了许多,相应的电费也交的更多了. 小玉家今天收到了一份电费通知单.小玉看到上面写:据闽价电[2006]27号规定, 月 ...
- Git标签与别名
code[class*="language-"], pre[class*="language-"] { color: rgba(51, 51, 51, 1); ...
- linux安装nginx 并配置文件服务器和代理服务器
linux安装nginx搭建服务并实现文件服务器和代理服务器配置 1.课题的背景和意义 由于编码过程中需要进行文件上传服务,文件上传后 需要有http资源的路径需要访问.原则上可以通过Apache . ...