【Vue】Re07 插槽Slot
一、插槽基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--
slot的使用目的是对组件中设置一个空白的自定义元素位置
在实际Vue实例中使用组件时，每一个调用的组件在定义的位置中插入不同的元素
-->
<div id="aaa">
<comp>
<!-- 2、在使用中插入我们希望的东西 -->
<button>这是我们插入的按钮</button>
</comp> <comp>
<p>这是我们插入的段落</p>
</comp> <comp>
<span>插入我们自定义的内容</span>
</comp>
</div> <template id="sss">
<div>
<h3>我是组件</h3>
<p>我是内容</p>
<slot></slot> <!-- 1、在组件的模板中定义插槽标签 -->
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#aaa',
components : {
comp : {
template : '#sss'
}
}
});
</script>
</body>
</html>
二、具名插槽的使用
具名插槽，意思就是插槽标签具备name属性，可以命名插槽：
要注意的是，不要和普通slot元素混用，造成插槽混乱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<cpn>
<span slot="right">替换name属性为right的插槽</span>
</cpn> <!-- 如果插入的元素没有指定，默认替换掉没有name属性的 --> <hr> <cpn>
<span slot="center">替换name属性为center中间的插槽</span> <!-- 或者指定具体名称进行插入 -->
</cpn>
</div> <template id="cpn">
<div>
<h3>组件</h3>
<p>内容</p> <p>
<!-- 具名插槽 slot标签具有名字属性 -->
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</p>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#app' ,
components : {
cpn : {
template : '#cpn'
}
},
});
</script>
</body>
</html>
三、编译作用域问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 编译作用域 -->
<div id="app">
<cpn v-show="isShow"></cpn> <!-- 3、判断组件是否显示 -->
</div>
<!-- 答案是true原因是因为 在实例容器元素中只会渲染实例的属性变量，只有在组件自己的实例中去调用自己的属性变量 --> <template id="sss">
<div>
<h3>ssss</h3>
<p>
不显示的按钮
<button v-show="isShow">不显示的按钮</button>
</p>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el : '#app',
data : {
message : '你好',
isShow : true /* 1、 在Vue实例中提供了一个属性isShow 值为true */
},
components : {
cpn : {
template: '#sss',
data () {
return {
isShow : false /* 2、 在注册的组件实例中提供了一个属性isShow 值为false */
}
},
},
},
})
</script>
</body>
</html>
四、作用域插槽：
在父组件中替换插槽的标签元素，但是值内容由子组件提供
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="aaa">
<!-- <comp></comp>-->
<!-- <comp></comp>-->
<!-- <comp></comp>-->
<comp>
<template slot-scope="slot">
<!--<span v-for="item in slot.data">{{item}} | </span>--> <!-- 解决拼接符号的问题 --> <span>{{slot.data.join(' | ')}}</span>
</template> <!-- template 用data获取 也可以把绑定的属性用其他命名 -->
</comp>
</div> <!--<template id="sss">-->
<!-- <div>-->
<!-- <ul>-->
<!-- <li v-for="pl in programLanguages">{{pl}}</li>-->
<!-- </ul>-->
<!-- </div>-->
<!--</template>--> <template id="sss">
<div>
<slot :data="programLanguages"> <!-- 把一个data属性绑定到这个pl变量 -->
<ul>
<li v-for="pl in programLanguages">{{pl}}</li>
</ul>
</slot>
</div>
</template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const aaa = new Vue({
el : '#aaa',
components : {
comp : {
template : '#sss',
data () {
return {
programLanguages : [
'JavaScript',
'C/C++',
'ObjectiveC',
'VisualBasic',
'Java',
'GoLang',
'Swift',
'Python',
'Ruby',
'Rust',
'PHP'
]
}
}
}
}
})
</script>
</body>
</html>
【Vue】Re07 插槽Slot的更多相关文章
- Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
- Vue中插槽slot的使用
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...
- vue的插槽slot
插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容 sl ...
- vue 中的slot属性(插槽)的使用
总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...
- vue中的slot（插槽）
vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...
- [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- Vue插槽 slot
1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
- 在vue中使用插槽 slot
插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
随机推荐
- Matlab打印运行进度
在运行matlab程序的过程中,有时候需要实时地掌握程序运行的进度,尤其对于一些耗时较长的循环操作,能够及时地输出运行进度,显得非常有必要. 打印进度条的实现方式就是不断地退格.输出. 退 ...
- SELinux(一) 简介
首发公号:Rand_cs 前段时间的工作遇到了一些关于 SELinux 的问题,初次接触不熟悉此概念,导致当时配置策略时束手束脚,焦头烂额,为此去系统的学习了下 SELinux 的东西.聊 SELin ...
- 让Easysearch运行在Kylin V10 (Lance)-aarch64上
简介 本文主要介绍在国产操作系统 Kylin V10 (Lance)-aarch64 上安装单机版 Easysearch/Console/Agent/Gateway/Loadgen 系统配置 在安装之 ...
- Scrapy框架(六)--图片数据抓取
基于文件下载的管道类 在scrapy中我们之前爬取的都是基于字符串类型的数据,那么要是基于图片数据的爬取,那又该如何呢? 其实在scrapy中已经为我们封装好了一个专门基于图片请求和持久化存储的管道类 ...
- 3个月搞定计算机二级C语言！高效刷题系列进行中
前言 大家好,我是梁国庆. 计算机二级应该是每一位大学生的必修课,相信很多同学的大学flag中都会有它的身影. 我在大学里也不止一次的想要考计算机二级office,但由于种种原因,备考了几次都不了了之 ...
- C#如何创建一个可快速重复使用的项目模板
写在前面 其实很多公司或者资深的开发都有自己快速创建项目的脚手架的,有的是魔改代码生成器实现,有的直接基于T4,RazorEngine等模板引擎打造:但无论如何,其最终目的其实就是搭建一个自定义项目模 ...
- 容器镜像安全：安全漏洞扫描神器Trivy
目录 一.系统环境 二.前言 三.Trivy简介 四.Trivy漏洞扫描原理 五.利用trivy检测容器镜像的安全性 六.总结 一.系统环境 本文主要基于Docker version 20.10.14 ...
- 【Ubuntu 1】ubuntu的软件包及便携系列 记录
目录 命令行补充[备注记录] 不想每次---- source /devel/setup.bash sudo chomd 777 /dev/ttyUSB* 安装区 --- 强推!Synergy Chro ...
- java实现微信登录
前言 上一篇做了php的微信登录,所以也总结一下Java的微信授权登录并获取用户信息这个功能的开发流程. 配置 配置什么的就不多说了,详细的配置可以直接前往我上一篇查看. https://www.cn ...
- GuavaCache、EVCache、Tair、Aerospike 缓存框架比较
Guava Cache.EVCache.Tair.Aerospike 是不同类型的缓存解决方案,它们各有特点和应用场景.下面我会逐一分析这些缓存系统的优势.应用场景,并提供一些基本的代码示例. Gua ...