当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 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. 力扣34(java)-在排序数组中查找元素的第一个和最后一个位置(中等)

    题目: 给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target.请你找出给定目标值在数组中的开始位置和结束位置. 如果数组中不存在目标值 target,返回 [-1, -1]. 你 ...

  2. 力扣21(java&python)-合并两个有序链表(简单)

    题目: 将两个升序链表合并为一个新的 升序 链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例 1: 输入:l1 = [1,2,4], l2 = [1,3,4] 输出:[1,1,2,3 ...

  3. OceanBase初体验之从MySQL迁移数据到OceanBase集群

    前置条件 MySQL 环境 OceanBase 环境 测试用的表结构和一些数据 先在源端 MySQL 用如下脚本创建测试表,以及写入10000条数据用于迁移测试. use test; CREATE T ...

  4. 解决方案|致拓T8数字化ERP

    ​简介:通过快速构建敏捷ERP系统,实现从销售到财务的全流程闭环管理,助力企业数字化升级. 「致拓T8数字化ERP」解决方案聚焦业财一体,助力企业卓有成效地提升经营收益,赋能企业个性化数字生产管理.本 ...

  5. 前沿分享|阿里云资深技术专家 魏闯先:AnalyticDB PostgreSQL年度新版本发布

    ​简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云资深技术专家 魏闯先关于"AnalyticDB PostgreSQL年度新版本发布&qu ...

  6. TheWay2Hack

    coding 阶段一 打基础. CS61A:现在进度落后一个月,递归部分让我焦头烂额.所以将完成时间延后了一个月,截止到6月7号搞完. CSAPP:卡在datalab,按照3月18号开始,预计7月1号 ...

  7. WPF 简单聊聊如何使用 DrawGlyphRun 绘制文本

    在 WPF 里面,提供的使用底层的方法绘制文本是通过 DrawGlyphRun 的方式,此方法适合用在需要对文本进行精细控制的定制化控件上.此方法特别底层而让调用方法比较复杂,本文告诉大家一些简单的使 ...

  8. 2018-8-10-C#-字符串首字符大写

    title author date CreateTime categories C# 字符串首字符大写 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17:2 ...

  9. 2019-8-31-C#-自动翻页-PPT-测试脚本

    title author date CreateTime categories C# 自动翻页 PPT 测试脚本 lindexi 2019-08-31 16:55:58 +0800 2019-08-1 ...

  10. webapi授权认证

    webapi授权认证 一.需要类包 Microsoft.AspNetCore.Authentication.JwtBearer 二.相关名词 Authentication(认证):标识用户的身份,一般 ...