vue 插槽 ------ slot 简单理解
solt 插槽 内容分发
什么是插槽
- Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口。
- 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就显示在什么位置。我们可以理解slot为要占出当前的位置,方便我们插入内容。或者可以这样理解:要去吃饭了,儿子先去占座,然后等他爸爸来了再一起吃。
用法
- 默认插槽,匿名插槽:无name属性,只能用一次
Vue.component("child",{
template:`<div>
111111
<slot></slot>
2222222
<slot></slot>
3333333
<slot></slot>
</div>
`
})
<div id="box">
<child>
<div>联通卡</div>
<div>移动卡</div>
<div>电信卡</div>
</child>
</div>
- 具名插槽:slot属性对应的内容都会和组件中name一一对应
Vue.component("child",{
template:`<div>
111111
<slot name="a"></slot>
2222222
<slot name="b"></slot>
3333333
<slot name="c"></slot>
</div>
`
})
//slot="" 与子组件中name一致
<div id="box">
<child>
<div slot="a">联通卡</div>
<div slot="b">移动卡</div>
<div slot="c">电信卡</div>
</child>
</div>
- 作用域插槽 : 组件上的属性,可以在组件元素内使用
//slot-scope
<child>
<template slot-scope="he">
{{he}}
</template>
<template slot-scope="a">
{{a}}
</template>
<template slot-scope="e">
{{e}}
</template>
</child>
Vue.component('child',{
template:`
<div>
<slot say="hehe"></slot>
<slot a="a"></slot>
<slot 1="1"></slot>
</div>
`
})
//页面显示结果 : { "say": "hehe" } { "a": "a" } { "1": "1" }
新slot v-slot
- 缩写 #名字
- 与之前版本的用法一样,v-solt用在template标签上
<div id="box">
<child>
<template v-slot:a>
<div>联通卡</div>
</template>
<template v-slot:b>
<div>移动卡</div>
</template>
<template #c>
电信卡
</template>
</child>
</div>
Vue.component("child",{
template:`<div>
111111
<slot name="a"></slot>
2222222
<slot name="b"></slot>
3333333
<slot name="c"></slot>
</div>
`
})
vue 插槽 ------ slot 简单理解的更多相关文章
- vue插槽slot的理解与使用
一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...
- vue 插槽slot总结 slot看这篇就够了
一直模糊所以梳理一下,看了好多篇园友的文章和官网文档在这整理一下 默认插槽 //slot组件<template> <div class="slots"> s ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...
- Vue插槽 slot
1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
- Vue插槽slot理解与初体验 ~
一.插槽的理解 1.官网介绍 Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 2.为什么使用插槽 Vue 中有一个重要的概念-组件,可以在开发中将子组 ...
- Vue slot简单理解
情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child',{ template:`<div ...
- Vue 插槽 slot的简单实用
- Vue插槽的深入理解和应用
一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...
随机推荐
- Java中数组的使用
1.声明数组 1.1声明一维数组 声明一维数组有下列两种格式: 数组的元素类型 数组名字[ ]; 数组的元素类型[ ] 数组名字 1.2声明二维数组 声明二维数组有下列两种格式: 数组的 ...
- ASP.NET Core 启用跨域请求
本文翻译整理自:https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1 一 .Cross-Orig ...
- C++ | C++ 基础知识 | 指针、数组与引用
1.指针 在 C++ 语言中存放及使用内存地址是通过指针和引用完成的. char c = 'a'; // 声明 c 变量,c 变量存储的是 'a' 的值. char* p = &c; // 声 ...
- Flask快速实现简单python接口
Flask 是一个轻量级 web 框架,自由.灵活.可扩展性强.Flask 本身相当于一个内核,大部分功能都需要扩展第三方库. Flask 框架有多“轻量”呢,之前写过一篇 Django实现restf ...
- 开源项目SMSS开源项目(三)——protobuf协议设计
本文的第一部分将介绍protobuf使用基础以及如何利用protobuf设计通信协议.第二部分会给出smss项目的协议设计规范和源码讲解. 一.Protobuf使用基础 什么是protobuf pro ...
- python条件(三元)运算符
条件运算符 是 三元运算符 语法: 语句1 if 条件表达式 else 语句2 执行流程: 条件运算符在执行时,会先对条件表达式进行求值判断 如果判断结果为True,则执行 ...
- redis订阅发布简单实现
适用场景 业务流程遇到大量异步操作,并且业务不是很复杂 业务的健壮型要求不高 对即时场景要求不高 原理介绍 redis官网文档:https://redis.io/topics/notification ...
- 2020寒假学习01 Scala 编程初级实践
1. 计算级数请用脚本的方式编程计算并输出下列级数的前 n 项之和 Sn,直到 Sn 刚好大于或等于 q为止,其中 q 为大于 0 的整数,其值通过键盘输入. Sn = 2/1+3/2+4/3+... ...
- Spring(三)核心容器 - ApplicationContext 上下文启动准备
目录 前言 正文 第一步:prepareRefresh 第二步:obtainFreshBeanFactory 第三步:prepareBeanFactory 第四步:postProcessBeanFac ...
- 部署Maven项目到tomcat报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderLi
Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL 严重: Error config ...