vue之slot,组件标签嵌套
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,组件标签嵌套的更多相关文章
- vue中slot组件的使用
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- vue内置的标签(组件)
component:用于动态组件,查看博文vue学习之组件. <component :is="componentId"></component> trans ...
- slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出
html 父页面<div id="app"> <register> <span slot="name">{{message. ...
- Vue.js之组件嵌套
Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
随机推荐
- 华为荣耀8 android 让真机显示 DeBug Log调试信息 (真机调试时不显示 Logcat 日志的解决办法)
================================================================ 以下内容转载自: https://blog.csdn.net/aiko ...
- learn go ifelse
package main // 参考文档: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/05.1.md im ...
- [数据处理] LabelEncoder编码
原创博文,转载请注明出处! # LabelEncoder介绍 LabelEncoder是对不连续的数字或文本编号. # LabelEncoder例子 # -*- coding: utf-8 ...
- VC dimension and Model complexity
可以把growth function m_H(N)的upper bound用N^(k-1)来限制, for N large, k>=3 Thus, 定义: VC Dimension: maxim ...
- tableau-详细级别表达式——2、阵列分析
tableau做阵列分析 合作时间越长的客户对销售额的贡献越大吗? 下面的视图按照客户首次购买的年份将客户分组,以便对比各个阵列的年度销售贡献额. 每个客户的最早订单日期将体现出首次购买日期.不过,由 ...
- python笔记-9(subprocess模块、面向对象、socket入门)
一.subprocess 模块 1.了解os.system()与os.popen的区别及不足 1.1 os.system()可以执行系统指令,将结果直接输出到屏幕,同时可以将指令是否执行成功的状态赋值 ...
- groovy gradle 构建配置
参考配置 apply plugin: "idea" apply plugin: "groovy" apply plugin: "eclipse&quo ...
- java I/O进程控制,重定向 演示样例代码
java I/O进程控制,重定向 演示样例代码 package org.rui.io.util; import java.io.*; /** * 标准I/O重定向 */ public class Re ...
- 搭建Spring Cloud+Dubbo
公司要测试一下zipkin是否可以跟踪全流程,项目的架构比较复杂,不要问我为什么,基本架构如下:前端门户,调用spring cloud组件,spring cloud在调用dubbo,这样一套流程.于是 ...
- (转)Linux安装SwfTools-0.9.2安装事,在执行make install时报错
系统:CentOS6.5 安装SwfTools-0.9.2的时候,在执行make install时报错, rm -f /usr/local/share/swftools/swfs/default_vi ...