组件基础(插槽slot)—Vue学习笔记
刚开始我们淡淡提过<slot></slot>现在深入了解一下。
slot可以进行父组件传值到子组件。
比如：我们将hiboy通过<slot>传递到组件中。
<body>
<div id="app">
<hello>
Hi boy
</hello>
</div>
</body>
<script>
Vue.component("hello",{
data:function(){
return {
list:[1,2,3,4]
}
},
template:'<p><slot></slot></p>'
}) var app=new Vue({
el:'#app'
})
</script>
结果：
当然这不是今天想要讲的。今天我们来分析两种情况。
一、多个插槽传递不同内容
这个时候我们需要设值的关键参数有： slot=' youngam'，name='young' (youngam随便取的，前后一致即可)
例子：我们想要通过两个<slot>分别传递header和footer，<h3>content</h3>作为主要内容区，具体如下代码。
<body>
<div id="app">
<hello>
<div>header</div>
<div>footer</div>
</hello>
</div>
</body>
<script>
Vue.component("hello",{
template:`<div>
<slot></slot>
<h3>content</h3>
<slot></slot>
</div>`
}) var app=new Vue({
el:'#app'
})
</script>
错误结果：
大家可以发现header和footer被当作一个插值进行了两次传递，这当然不是我们想要的。
解决方法：
通过定义slot的值 <div slot="header">header</div>
组件中<slot name="header"></slot>
这样在插值时就会找对应的slot进行。
修改后代码：
<body>
<div id="app">
<hello>
<div slot="header">header</div><!--添加slot的值 -->
<div slot="footer">footer</div>
</hello>
</div>
</body>
<script>
Vue.component("hello",{
template:`<div>
<slot name="header"></slot> //与上面值对应(运行时删除备注)
<h3>content</h3>
<slot name="footer"></slot>
</div>`
}) var app=new Vue({
el:'#app'
})
</script>
二、作用域插槽（插槽Dom类型由父组件决定）
关键代码：slot-scope='变量名'
<template slot-scope="youngam"></template>
例子：
现在我们的组件中有一个数组，通过v-for遍历到对应li标签中并实现显示。
代码：
<body>
<div id="app">
<hello>
</hello>
</div>
</body>
<script>
Vue.component("hello",{
data:function(){
return {
list:[1,2,3,4]
}
},
template:`<div>
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
</div>`
}) var app=new Vue({
el:'#app'
})
</script>
结果：
好的，正确显示。
但是，此时的ul和li是固定在组件中的，我们想要通过父组件传递标签实现循环时所显示的是什么标签（此时显示的是<li></li>）
具体做法：将需要传递的标签外面套一层<template slot-scope="随便一个变量名"></template>标签
具体代码：
<body>
<div id="app">
<hello>
<template slot-scope="youngam">
<h3>{{youngam.item}}</h3>
</template>
</hello>
</div>
</body>
<script>
Vue.component("hello",{
data:function(){
return {
list:[1,2,3,4]
}
},
template:`<div>
<ul>
<slot v-for='item in list' :item=item></slot>
</ul>
</div>`
}) var app=new Vue({
el:'#app'
})
</script>
这里将slot替换成了h3但数据是组件里的。通过 变量名.循环单个值 的形式可以获取到数据。
结果：
好了，具体类容还是看官方文档吧。
就是这样。
组件基础(插槽slot)—Vue学习笔记的更多相关文章
- 组件基础（参数校验和动态组件、v-once）—Vue学习笔记
最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
随机推荐
- 如何查看Python内置模块的实现代码
方法1:使用help(random) >>> import random >>> help(random) Help on module random: NAME ...
- Mysql 数据库修改datadir和调整默认引擎要注意的问题
数据库更改 datadir 默认位置: 首先前面的基础操作我就不多说了,无非是复制mysqldata目录,然后修改 my.conf 配置文件 datadir 的 路径地址.然后重启mysql.这里可能 ...
- 牛客训练四：Applese 涂颜色（费马小定理+快速幂）
题目链接:传送门 思路: 考虑每一列有2种颜色,总共有n行,每一行的第一个格确定颜色,由于左右颜色不相同,后面的行就确定了. 所以总共有2^n中结果. 由于n太大,所以要用到费马小定理a^n%mod= ...
- Win7 VS2015及MinGW环境编译矢量库agg-2.5和cairo-1.14.6
书接上文,昨天装了MinGW,主要原因之一是要用到MSYS,所以顺手把FFMPEG又编译了一遍. 回到主题,其实我是想编译矢量库,因为最近要学习一些计算几何算法,所以找个方便的2D画图库就很重要. 说 ...
- yyparse() and yylex()
Yacc 与 Lex 快速入门 yyparse() returns a value of 0 if the input it parses is valid according to the give ...
- 在运行bat文件时，报错发生系统错误123,文件名，目录名或卷标语法不正确
报错:发生系统错误123,文件名,目录名或卷标语法不正确 这个错误就相当于你在dos命令行中输入一个命令,报错“不是内部或外部命令,也不是可运行的程序”.此时你可以在系统环境变量中检查是否配置了这个命 ...
- ajax GET 传输中文乱码
关于客户端get传输到服务端乱码解决: <script> //ajakx 传输变量 var xmlhttp; if (window.XMLHttpRequest) {// code for ...
- Nginx使用（配置开机启动）
环境: 系统:CentOS 6.5 Final 安装目录:/usr/local/nginx Nginx开机自启: ①编写shell实现控制 vi /etc/init.d/nginx 添加内容: #!/ ...
- WebGIS实现在线要素编辑之ArcGIS Server 发布Feature Service 过程解析
WebGIS实现在线要素编辑之ArcGIS Server 发布Feature Service 过程解析 FeatureService也称要素服务,其最大的好处就是支持在线要素编辑,并将编辑同步更新到后 ...
- silverlight 父窗体传值给ChildWindow
在网上找了许多列子,有的没有看懂,有的太麻烦. 现在有两种方法又简单又实用的,分享给大家! 第一种:使用构造函数传值 1.子页面新建一个构造函数 public ChildWindowTest(stri ...