当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。

# 子组件

<div>

<h2>我是子组件的标题</h2>

<slot>

只有在没有要分发的内容时才会显示。

</slot>

</div>

# 父组件

<div>

<h1>我是父组件的标题</h1>

<my-component>

<p>这是一些初始内容</p>

<p>这是更多的初始内容</p>

</my-component>

</div>

vue单个插槽的更多相关文章

  1. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  2. vue组件---插槽

    (1)插槽内容 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 在父级组件里可以 ...

  3. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  4. vue.js插槽

    具体讲解的url https://github.com/cunzaizhuyi/vue-slot-demo //例子 用jsfiddle.net去运行就好 <!DOCTYPE html> ...

  5. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  6. 通过UI库深入了解Vue的插槽的使用技巧

    Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...

  7. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  8. 细说Vue作用域插槽,匹配应用场景。

    最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...

  9. vue slot插槽的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Vue中插槽slot的使用

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...

随机推荐

  1. 开源微服务编排框架:Netflix Conductor

    简介:本文主要介绍netflix conductor的基本概念和主要运行机制. ​ 作者 | 夜阳 来源 | 阿里技术公众号 本文主要介绍netflix conductor的基本概念和主要运行机制. ...

  2. MaxCompute中如何通过logview诊断慢作业

    ​建模服务,在MaxCompute执行sql任务的时候有时候作业会很慢,本文通过查看logview排查具体任务慢的原因 在这里把任务跑的慢的问题划分为以下几类 资源不足导致的排队(一般是包年包月项目) ...

  3. 剑指企业级云原生,阿里云 CNFS 如何破局容器持久化存储困境

    简介: 云原生趋势下,应用容器化比例正在快速增长,Kubernetes 也已成为云原生时代新的基础设施. 据 Forrester 预测,到 2022 年, 全球企业及组织在生产环境运行容器化应用.观察 ...

  4. Python内置数据类型性能分析

    timeit模块 timeit模块可以用来测试一小段Python代码的执行速度. class timeit.Timer(stmt='pass', setup='pass', timer=<tim ...

  5. dotnet OpenXML 读取形状轮廓线条样式序号超过主题样式列表数

    在 OpenXML 中,默认的形状可以通过指定 LineReference 让形状使用文档主题里面的样式.文档主题里面包含多个样式,在形状里面指定样式通过的是序号的方法,如果在形状里面指定的序号超过了 ...

  6. 2019-9-2-C#-设计模式-责任链

    title author date CreateTime categories C# 设计模式 责任链 lindexi 2019-09-02 12:57:37 +0800 2018-2-13 17:2 ...

  7. 2018-3-8-WPF-UncommonField-类型是什么

    title author date CreateTime categories WPF UncommonField 类型是什么 lindexi 2018-3-8 16:25:2 +0800 2018- ...

  8. Anaconda环境下GPT2-Chinese的基本使用记录

    偶然在看到了这个项目,感觉很厉害,于是就折腾了下,跑了一跑 项目地址:https://github.com/Morizeyao/GPT2-Chinese 如果Github下载太慢的可以用这个代下载:h ...

  9. SAP Adobe Form 教程六 FormCalc和JavaScript的实践

    前文: SAP Adobe Form 教程一 简单示例 SAP Adobe Form 教程二 表 SAP Adobe Form 教程三 日期,时间,floating field SAP Adobe F ...

  10. LMDeploy量化部署LLM&LVM实操-书生浦语大模型实战营第二期第5节作业

    书生浦语大模型实战营第二期第5节作业 本页面包括实战营第二期第五节作业的全部操作步骤.如果需要知道模型量化部署的相关知识请访问学习笔记. 作业要求 基础作业 完成以下任务,并将实现过程记录截图: 配置 ...