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. 华为荣耀8 android 让真机显示 DeBug Log调试信息 (真机调试时不显示 Logcat 日志的解决办法)

    ================================================================ 以下内容转载自: https://blog.csdn.net/aiko ...

  2. learn go ifelse

    package main // 参考文档: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/05.1.md im ...

  3. [数据处理] LabelEncoder编码

    原创博文,转载请注明出处! # LabelEncoder介绍       LabelEncoder是对不连续的数字或文本编号. # LabelEncoder例子 # -*- coding: utf-8 ...

  4. VC dimension and Model complexity

    可以把growth function m_H(N)的upper bound用N^(k-1)来限制, for N large, k>=3 Thus, 定义: VC Dimension: maxim ...

  5. tableau-详细级别表达式——2、阵列分析

    tableau做阵列分析 合作时间越长的客户对销售额的贡献越大吗? 下面的视图按照客户首次购买的年份将客户分组,以便对比各个阵列的年度销售贡献额. 每个客户的最早订单日期将体现出首次购买日期.不过,由 ...

  6. python笔记-9(subprocess模块、面向对象、socket入门)

    一.subprocess 模块 1.了解os.system()与os.popen的区别及不足 1.1 os.system()可以执行系统指令,将结果直接输出到屏幕,同时可以将指令是否执行成功的状态赋值 ...

  7. groovy gradle 构建配置

    参考配置 apply plugin: "idea" apply plugin: "groovy" apply plugin: "eclipse&quo ...

  8. java I/O进程控制,重定向 演示样例代码

    java I/O进程控制,重定向 演示样例代码 package org.rui.io.util; import java.io.*; /** * 标准I/O重定向 */ public class Re ...

  9. 搭建Spring Cloud+Dubbo

    公司要测试一下zipkin是否可以跟踪全流程,项目的架构比较复杂,不要问我为什么,基本架构如下:前端门户,调用spring cloud组件,spring cloud在调用dubbo,这样一套流程.于是 ...

  10. (转)Linux安装SwfTools-0.9.2安装事,在执行make install时报错

    系统:CentOS6.5 安装SwfTools-0.9.2的时候,在执行make install时报错, rm -f /usr/local/share/swftools/swfs/default_vi ...