当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 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. 6980. 【2021.02.03冬令营模拟】你的世界(world) Another Solution

    Problem Description Input 从文件 world.in 中读入数据. Output 输出到文件 world.out 中. 输出共 T 行,第 i 行表示第 i 组测试数据的答案, ...

  2. React纯组件的使用

    1. 有无必要使用纯组件 如果应用不是很大型,页面渲染效率使用纯组件与非纯组件差别不大,尽量使用组件 应用一定注意,setState时子组件依赖渲染的属性一定要传递给子组件,不然父组件setState ...

  3. PolarDB-X 2.0:使用一个透明的分布式数据库是一种什么体验

    简介: 透明分布式,是PolarDB-X即将发布的能力,它能让应用在使用PolarDB-X的过程中,犹如使用单机数据库一般的体验.与传统的中间件类型的"分布式数据库"相比,有了透明 ...

  4. 使用 SizeBench 分析 Exe 文件体积

    本文将介绍微软开源免费的 SizeBench 工具,使用 SizeBench 工具可以用来分析 Exe 二进制文件的体积,分析 Exe 文件大小里面有哪些是可以优化的 下载安装方式: 请前往应用商店安 ...

  5. WPF 字体 FontStyle 的 Italic 和 Oblique 的区别

    本文介绍在 WPF 里面的字体属性 FontStyle 的 Italic 和 Oblique 的斜体差别 本文的图片和知识来自: #265 – Specifying Values for FontSt ...

  6. 修复 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝到输出文件夹

    本文告诉大家如何修复 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝到输出文件夹的问题.如果 VisualStudio 构建时没有将 NuGet 的 PDB 符号文件拷贝 ...

  7. Postergresql常见操作

    Postergresql常见操作 1. 安装部署 略 2. 登录数据库 查看版本 ## 以管理员身份 postgres 登陆,然后通过#psql -U postgres#sudo -i -u post ...

  8. WSL2使用桥接网络,并指定IP

    前言 微软终于解决了宇宙级难题了,一直以来的WSL2每次启动IP都是动态分配的,并且是NAT的网络.当然网上对此也有一些解决方案,编写脚本在启动时修改,但是太麻烦了,这次很完美的解决了这个难题. 检查 ...

  9. 【Python基础】两个参数的for循环步长写法

    一个参数for循环步长写法 >>> for i in range(1,10000,1000):print(i) ... 1 1001 2001 3001 4001 5001 6001 ...

  10. tomcat(3)- tomcat部署zrlog

    目录 1. Tomcat单独部署 2. nginx+tomcat部署 1. Tomcat单独部署 部署场景为: 客户端:192.168.20.1 tomcat:主机名:tomcat01,地址:192. ...