Vue中slot与slot-scope的理解及使用
以前使用过vue,但是从来没有用过插槽slot,最近突然看到slot,发现有点不会用,因此决定系统的学习一下插槽slot。
但是在查看了vue文档后,感觉说的太笼统,让人难以理解,因此在网上查了很多资料,终于感觉自己对插槽slot有了一定的了解,决定记录下来,希望能帮到和我一样对插槽slot不懂的朋友。
对于官网文档中说的我就在此不复述了,感觉如果看懂的了的,也就不需要阅读这篇文章了。
首先要知道,插槽分两类,默认插槽和具名插槽;通俗理解就是默认插槽是没有名称的插槽,具名插槽是有名称的插槽。
何时使用插槽?
简单的举个栗子:有2个组件,父组件father,子组件son。
父组件 father
<template><div><h3>这是父组件</h3><son>实践slot</son></div>
</template>
子组件 son
<template><div><h4>这是子组件</h4><input type="text" placeholder="请输入"></div>
</template>
一般我们的组件都会怎么写,但是这么写的话,会发现子组件中的实践slot是显示不出来的。如果需要让他显示出来,这时我们就可以用到插槽slot了。
如何使用插槽?
首先,子组件中我们要添加插槽slot,
<template><div><h4>这是子组件</h4><input type="text" placeholder="请输入"><slot></slot> </div>
</template>
这时,终于出现了slot。slot的位置就会出现父组件中实践slot这几个大字。
如图:
可以看到,这里面slot是没有名称的,顾名思义,这是插槽中的默认插槽。
然后在看看具名插槽,直接上代码,一目了然,
父组件
<template><div><h3>这是父组件</h3><son><span>实践slot</span></son><son><template slot="myslot"><div>实践具名slot</div></template></son></div>
</template>
子组件
<template><div><h4>这是子组件</h4><input type="text" placeholder="请输入"><slot></slot><slot name="myslot"></slot></div>
</template>
可以看出,和默认插槽不同的是,在子组件中,我们给插槽一个name属性,这个就是插槽的名称,同时在父组件中,我们在需要将内容插入的地方标签上加了一个slot属性,他的值就是我们的slot 名称name。
效果如下图:
上面就是2中插槽,默认插槽和具名插槽的用法。
下来是slot-scope。slot-scope是作用域插槽。
官网中有一句特别强调的话:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。简单的所,就是父组件中不能直接用自组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。如下代码
父组件
<template lang=""><div><h3>这是父组件</h3><son><template slot="myslot" slot-scope="scope"><ul><li v-for="item in scope.data">{{item}}</li></ul></template></son></div>
</template>
子组件
<template><div><h4>这是子组件</h4><input type="text" placeholder="请输入"><slot name="myslot" :data='list'></slot></div>
</template>
<script>
export default {name:'Son',data(){return{list:[{name:"Tom",age:15},{name:"Jim",age:25},{name:"Tony",age:13}]}}
}
</script>
首先先看下效果,
其中,下方三个对象的值,我们本身是在子组件中定义的,按照官方文档中说的,本来父组件中是无法显示出来这些数据的,但是为什么现在显示出来了呢???这就要归功于我们强大的slot-scope了。
首先,在子组件中的插槽上有一句data="list",而在父组件中也有slot-scope="scope",slot-scope就是取data的值,slot-scope的值是自定义的,我们可以取任何名称,但是data的值传过来时是以对象形式传输的,所以在这scope.data才是list的值。
这样我们就可以在父组件中取到子组件的值,并且加以应用了。
以上就是我对vue中插槽的理解,有不对的地方欢迎指出,我们一起进步,一起学习。
Vue中slot与slot-scope的理解及使用相关推荐
- vue中对token的有效期的理解
vue中对token的有效期的理解 保持登录是每个web页面必须要做的,不能一直不停的让用户进行登录,也不能让用户不登录就直接进入页面.token在保持登录中起到了非常重要的作用,我之前写过一篇博客, ...
- Vue中的Ajax②(slot插槽)
文章目录 案例引入 默认插槽 具名插槽 作用域插槽 总结 案例引入 我们现在有一个需求: 代码: App组件: <template><div class="containe ...
- 细讲Vue中的插槽slot
一.插槽是什么 下面看一个例子 写一个父组件: test.vue <template><div><div>我是父组件</div><myslot&g ...
- Vue中 $attrs、$listeners使用和理解
前言 提示:Vue中 常见的组件通信方式可分为三类: 父子通信 通常父子传值都是 通过prpos,子组件通过events接收 通过父链/子链 通信($parent/$chldren); ref也可以访 ...
- 理解vue中的插槽------slot与slot-scope-已整理
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板.该模板是否显示,以及如何显示由其父组件说了算.不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传 ...
- vue中的插槽--slot和v-slot
今天团队内部有一个技术分享会,主要是vue进阶这一块,我对插槽slot的认识还不清晰,于是就总结一下 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容, ...
- vue 中的插槽Slot基本使用和具名插槽
一.插槽Slot的作用 1.为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素: 2.比如某些情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使 ...
- VUE的插槽(slot和slot-scope)
前言 在之前的获取当前行数据中,最终的方案是使用了slot-scope="scope"的方式获取了当前行的数据,当时对slot-scope是个什么东东不了解.这两天查看了好多资料, ...
- 面试官:Vue中组件和插件有什么区别?
一.组件是什么 回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度 ...
- vue中App.vue的主要作用
app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式.不在上面写代码也可以. app.vue是主组件,是页面入口文件,是vue页面资源的首加载项.所有的页面都是在app.v ...
最新文章
- 在VS中编译C++静态库以及使用的方法
- antd Table/ProList中rowClassName用法(补充记录)
- MAC使用homeBrew安装Redis
- 《2021国庆出行报告》出炉:全国高速拥堵里程占比同比下降37%
- Cinder - 云硬盘加密
- python 去除水印_python 利用opencv去除图片水印
- Matlab来实现DDS功能
- 古代平朔历法基本算法
- jemter使用beanshell的几种方法
- mysql盲注脱裤_记一次猥琐的脱裤
- 年底打新将空前白热化:闭眼赚钱谁会放过?
- python3 武装飞船游戏实战 代码及详细注释
- 生活随记 - 立冬 暖阳高照
- [经验分享]TL431的应用及其封装乱象
- 计算机科学类专升本复习之“C语言fopen函数的用法”详解(初稿)
- 用计算机弹琴琴谱,用电脑键盘钢琴之琴谱.doc
- 未查询到您的引进业务,请确认办理引进业务的证件号码是否正确
- node数据库学习之mysql 1
- Java新浪微博客户端开发第二步
- Command failed:C:Windows\system32\cmd. exe /s/c autoreconf -ivf
热门文章
- 申宝策略-指数呈现放量调整走势
- arcgis for Android 100.2 绘制点线面(文末有三维地图)
- win10更改固定IP出现意外无法更改
- 计算机中丢失ENWeb,vbaen32.olb
- 试题六(java+设计模式)
- 常见移动机器人运动学模型总结
- ACM-ICPC 2018 沈阳赛区现场赛 E. The Kouga Ninja Scrolls (切比雪夫距离+线段树)
- HarmonyOS鸿蒙学习笔记(2)路由ohos.router的使用
- [HarmonyOS][鸿蒙]fp、vp、px相互转换
- Centos7运行Docker1.13.1报错Loaded: loaded (/usr/lib/systemd/system/docker.service; disabled; vendor pres