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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
纯js实现动态时间显示
Sep 07 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
js实现百度淘宝搜索功能
2020/02/17 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python实现自动发送邮件
2018/06/20 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
Python csv文件记录流程代码解析
2020/07/16 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
自我鉴定 电子商务专业
2014/01/30 职场文书
廉政承诺书2015
2015/04/28 职场文书
人民调解协议书
2016/03/21 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis