当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 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. 力扣238(java)-除自身以外数组的乘积(中等)

    题目: 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 . 题目数据 保证 数组 nums之中任意元素的全 ...

  2. Cube 技术解读 | 详解「支付宝」全新的卡片技术栈

    ​简介: 魔方卡片(Cube),让 App 首页实现敏捷更新. ​ CodeHub#7 正式落幕,来自蚂蚁集团的技术专家「京君」与掘金社区的开发者们分享了「支付宝」全新的卡片技术栈--魔方卡片(Cub ...

  3. [FAQ] VisualStudio, Source file requires different compiler version (current compiler is 0.6.1+cxxxxxx)

    当使用的 Solidity 库文件中 pragma 指定的 版本 与本地编译器的使用版本不一致时,会出现这类提示. 解决方式是菜单栏 View -> Extensions -> Exten ...

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

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

  5. dotnet 使用 TaskTupleAwaiter 同时等待多个任务简化代码写法

    在某些业务逻辑下,需要同时等待多个任务执行完成,才能继续往下执行后续逻辑.等待任务执行的逻辑,大部分情况下需要使用到 Task.WhenAll 方法,代码行数不少.另外,在需要获取多个异步任务的返回值 ...

  6. dotnet 写一个支持层层继承属性的对象

    我最近在造一个比 Excel 差得多的表格控件,其中一个需求是属性的继承.大家都知道,表格里面有单元格,单元格里面允许放文本,文本可以放多段文本.本文的主角就是文本段落的样式属性,包括文本字体字号颜色 ...

  7. 优秀的 RocketMQ 可视化管理工具 GUI 客户端

    优秀的 RocketMQ 可视化管理工具 GUI 客户端 官网地址:http://www.redisant.cn/rocketmq 快速查看所有 RocketMQ 集群,包括Brokers.Topic ...

  8. 1.prometheus源码安装

    一.prometheus安装前准备 prometheus官网:https://prometheus.io/ grafana官网:https://grafana.com/ 资源下载: # 1.资源下载 ...

  9. 笔记04_正确使用Heterogeneous元件

    笔记04_正确使用Heterogeneous元件 1.出现错误的原因,就是一个元件的几个 部分没有分组.比如上一节创建的NE5532_HETE,当这个元件被调用两次或更多次时,存在若干个A,B部分,如 ...

  10. VUE+element页面按钮调用dialog

    VUE+element通过按钮调用普通弹框(弹框页面独立出一个dialog页面,非在同一个页面文件里) 代码如下 <el-dialog> <el-button type=" ...