vue之slot,组件标签嵌套

插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的。

 <el-col >
<el-checkbox >
</el-col>

而我们也经常会用到这种场景,例如封装一个边框样式的组件,组件中的内容,可以通过这种方式制作,或者将子组件提取到父组件中进行操作等等。

slot分为两种情况,匿名和具名。

1.匿名

例子:

子组件:

<div>
<h2>我是子组件的标题</h2>
<slot></slot> /*这里插入父组件在引用子组件内部的内容*/
</div>

父组件:

<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>

父组件p标签的位置也可以放一些其他组件。my-component标签中的内容,会插入到该组件slot标签的位置。

当渲染后,就会变成:

<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>

2.具名:

具名slot其实就是对匿名slot的补充,它可以做到将组件插入到子组件的指定位置。

例子:

子组件:

<div>
<slot name="header"></slot>
<slot name="footer"></slot>
<slot></slot>
</div>

父组件:

<my-component>
<p>Lack of anonymous slot, this paragraph will not shown.</p>
<p slot="footer">Here comes the footer content</p>
<p slot="header">Here comes the header content</p>
</my-component>

渲染结果:

<div>
<p>Here comes the header content</p>
<p>Here comes the footer content</p>
<p>Lack of anonymous slot, this paragraph will not shown.</p>
</div>

参考自:https://blog.csdn.net/u014628388/article/details/76100400

vue之slot,组件标签嵌套的更多相关文章

  1. vue中slot组件的使用

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...

  2. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  3. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  4. vue内置的标签(组件)

    component:用于动态组件,查看博文vue学习之组件. <component :is="componentId"></component> trans ...

  5. slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出

    html 父页面<div id="app"> <register> <span slot="name">{{message. ...

  6. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  7. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

  8. Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)

    欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...

  9. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

随机推荐

  1. EP-N8530S USB WIFI 驱动移植

    /*********************************************************************** * EP-N8530S USB WIFI 驱动移植 * ...

  2. 为网站添加favicon.ico图标

    前言 貌似每次都是等到网站快收尾时才做favicon.ico的,这次也不例外.这年代…… 步骤 1.PS制作正方形图标,格式为jpg.jpeg.gif或png. 2.将图标转换为ICO格式,网上有很多 ...

  3. 每天一个linux命令(权限):【转载】chgrp命令

    在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...

  4. Set集合学习

    Java中的Set主要有:HashSet.TreeSet.LinkedHashSet. 一:HashSet HashSet 是一个没有重复元素的无序集合. HashSet由HashMap实现的,不保证 ...

  5. LeetCode 549. Binary Tree Longest Consecutive Sequence II

    原题链接在这里:https://leetcode.com/problems/binary-tree-longest-consecutive-sequence-ii/description/ 题目: G ...

  6. caddy server 几个常用插件

    1.log日志   log /var/www/log/example.log 2.目录访问   browse 3.gzip压缩   gzip 4.自主ssl证书   tls /path/ssl/exa ...

  7. C#机器学习插件 ---- AForge.NET

    目录 简介 主要架构 特点 学习之旅 简介 AForge.NET是一个专门为开发者和研究者基于C#框架设计的,这个框架提供了不同的类库和关于类库的资源,还有很多应用程序例子,包括计算机视觉与人工智能, ...

  8. vi/vim显示中文字符并且去掉^M的方法

    vim上经常会碰到中文显示不正常的现象,也就是传说中的乱码.搜索了一下,在 http://www.chinalinuxpub.com/bbs/showthread.php?t=45475 找到了一个解 ...

  9. ZooKeeper+Kafka+Storm

    http://www.cnblogs.com/panfeng412/archive/2012/11/30/how-to-install-and-deploy-storm-cluster.html

  10. 1、spark集群搭建

    前提:已经搭建完全分布式的Hadoop集群,请参看http://www.cnblogs.com/netbloomy/p/6660131.html 1.Scala2.12.1环境搭建 1).下载scal ...