vue插槽slot的理解和使用方法


Posted in Javascript onApril 03, 2019

前言

Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替。根据slot的应用场景可以分为匿名slot和具名slot。

一、个人理解及插槽的使用场景

刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑。既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了。后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去重写子组件是很不明智的一件事,当然也可以将不同之处都写在子组件里,然后通过父组件传来的标识进行选择显示。其实质是对子组件的扩展,通过slot插槽向组件内部指定位置传递内容,即将<slot></slot>元素作为承载分发内容的出口;

二、用于理解的例子

目前还没接触到使用插槽解决实际问题很好的例子,只能这样去为了理解插槽而用,可能并没有很好的利用到插槽的好处。

在父组件定义想要传入子组件作为插槽的内容,App.vue

<template>
 <div id="app">
 <div>
 <input type="text" v-model="info">
 <button @click="handleClick">添加</button>
 </div>
 <todolist v-for="item in list" :key="item" :message="msg">
 <template v-slot:item="itemProps" >
 <!-- tips1:<span>即为插槽内容



tips2:item是插槽的名字,为具名插槽,可对应插入到子组件中具体的插槽位置
  tips3:itemProps可以获取到子组件(即插槽 prop)传出来的状态(值),
 
 插槽 prop 的对象命名为 itemProps,可任意命名,itemProps变量存在于 <template> 作用域中
  -->
 <span :style="{fontSize: '20px', color: itemProps.checked ? 'red': 'blue'}">{{item}}</span>
 </template>
 </todolist>
 </div>
</template>

<script>

 import todolist from './components/todolist.vue';
export default {
 name: 'App',
 components: {
 todolist
 },
 data(){
 return {
 msg: '4-2-05',
 info: '',
 list: [],
 }
 },
 methods: {
 handleClick() {
 // 获取到input输入的东西,然后加入到数组中
 this.list.push(this.info);
 this.info = ''
 }
 },
}
</script>

<style>
</style>

在子组件利用<slot></slot>元素作为承载分发内容的出口,父组件的插槽内容将在其中显示,todolist.vue

<template>
 <div>
 {{message}}
 <li class="item">
 <input type="checkbox" v-model="checked">
 <slot name="item" v-bind="{checked}" ></slot>
 <!--插槽内容能够访问子组件中才有的数据是很有用的,又因为父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的
 所以得想办法获取到子组件的数据。-->
 <!--给子组件绑定一个动态参数,checked作为一个 <slot> 元素的特性绑定上去,绑定在 <slot> 元素上的特性被称为插槽 prop-->
 </li>
 </div>
</template>

<script>
 export default {
 props: ['item','message'],
 // 因为父组件在插槽内容里使用item, 即此句代码<span>{{item}}</span>
 // 相当于需要传递给子组件的内容,也就是通常的父子组件通信,所以在子组件需要通过props来获取
 data() {
  return {
  checked: false,
  }
 },
 created() {
  console.log(this.message);
 }
 }
</script>

<style scoped>
 .item {
 color: red;
 }
 li{
 list-style: none;
 }
</style>

三、具体知识点

1、具名插槽

上面的例子只使用了一个slot插槽,但有时我们在一个组件里可能会多处使用插槽,我们希望在不同的插槽处插入不同的内容,此时便需要进行区分,<slot> 元素有一个特殊的特性:name。这个特性可以用来定义插槽的名字,在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用

 v-slot 指令,并以 v-slot 的参数的形式写出插槽的名称,使其一一对应。

<slot name="header"></slot>
 <slot name="content"></slot>
 <slot ></slot>
//一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

2、作用域插槽

为了使父组件的插槽内容可以使用子组件的数据,可以在 <slot> 元素上绑定想要传递的数据,此特性被称为插槽 prop。同时在父级作用域中,给 v-slot 带一个值来定义我们提供的插槽 prop 的名字,便可获取到。但此内容只在 <template>作用域内可用。

四、自 2.6.0 起有所更新的语法变化

1、带有slot特性的具名插槽

2、带有slot-scope特性的作用域插槽

五、突发奇想的调换

因为看到一个别人写的关于slot的帖子,他应该是写错了插槽在子父组件的内容,这也就相当于从子组件传一个插槽内容给父组件。仔细想想这思路有问题,既然都引用了子组件,父组件便可以访问到子组件的所有内容,现在却非要通过插槽来传递,多此一举。

然后我就试了一下将插槽内容卸载子组件里,果然出现了报错,如下:

  - <template v-slot> can only appear at the root level inside the receiving the component(slot的只能出现在接受组件的根级别)

也就是只能在父组件使用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
react写一个select组件的实现代码
Apr 03 #Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 #Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 #Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 #Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 #Javascript
elementUI多选框反选的实现代码
Apr 03 #Javascript
vue生命周期的探索
Apr 03 #Javascript
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
jquery实现吸顶导航效果
2020/01/08 jQuery
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python先序遍历二叉树问题
2017/11/10 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
少先队学雷锋活动月总结
2014/03/09 职场文书
2015年统战工作总结
2015/05/19 职场文书
工作年限证明范本
2015/06/15 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技