v-slot和slot、slot-scope之间相互替换实例


Posted in Javascript onSeptember 04, 2020

如果组件文档里面用的是v-slot,而你用的是vue2.6之前的版本,则需要替换v-slot:所以有两种替换方式,注意看两块v-slot有啥不同,你就知道你该怎么用slot-scope和slot来替换文档中的v-slot了

v-slot使用方式1:

<template v-slot:operate="{ row }"><template>

则可替换为:

<template slot="operate" slot-scope="{ row }"></template>

v-slot使用方式2:

<template v-slot="{ row }"><template>

则可替换为:

<template slot-scope="row"></template>

先记录后期再完善,赶项目去了

补充知识:V-for and slot-scoped报错问题

此场景是为了用v-for动态渲染表格的slot

可能会这么写

<a-table>
 <span v-for="(item, index) in header" :key="index" :slot="item.dataIndex" slot-scope="text" >
  {{ text }}
 </span>
</a-table>

但是这样子会报错,因为v-for和slot-scope在同一级

Ambiguous combined usage of slot-scope and v-for on (v-for takes higher priority). Use a wrapper < template> for the scoped slot to make it clearer.

提示在外边包一层< template>,于是你可能改成下面这样,但是也会报错

<a-table>
 <template v-for="(item, index) in header" :key="index">
 <span :slot="item.dataIndex" slot-scope="text" >
  {{ text }}
 </span>
 </template>
</a-table>
< template> cannot be keyed. Place the key on real elements instead.

提示< template>template不能写key, 即使没有这个错,表格数据也不会渲染出来,因为这一层没有slot,应该说slot应该是放最外面,同时把:key放里面

改成如下

<a-table>
 <template v-for="(item, index) in header" :slot="item.dataIndex" slot-scope="text">
 <span :key="index">
  {{ text }}
 </span>
 </template>
</a-table>

以上解决问题

有个slot没有渲染的问题

<template v-for="(slotname, idx) in ['status', 'sub_account_status']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  <a-tag v-if="text === '正常'" color="blue">{{ text }}</a-tag>
  <a-tag v-else color="red">{{ text }}</a-tag>
  </span>
 </template>
 <!-- 包名称、关联账号 -->
 <template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  <a-tooltip placement="top" >
  <template slot="title">
  <span v-for="(item, index) in text" :key="index">{{ item }}<br/></span>
  </template>
  <div class="tableHidden">
  <a-tag v-for="(item, index) in text" :key="index">{{ item }} </a-tag>
  </div>
  </a-tooltip>
  </span>
 </template>

好像是因为2个v-for="(slotname, idx)"里的slotname名字一样了,对的,就是取的临时变量名,修改成不一样的就好了,神奇

<template v-for="(name, idx) in ['status', 'sub_account_status']" :slot="name" slot-scope="text" >
  // 上面那个name
  <span :key="idx">
  。。。
  </span>
 </template>
 <!-- 包名称、关联账号 -->
 <template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  。。。
  </a-tooltip>
  </span>
 </template>

以上这篇v-slot和slot、slot-scope之间相互替换实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 #Javascript
解决vue scoped scss 无效的问题
Sep 04 #Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 #Javascript
基于vue中的scoped坑点解说
Sep 04 #Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 #Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 #Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 #Javascript
You might like
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php简单获取复选框值的方法
2016/05/11 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
React快速入门教程
2017/01/17 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
Python入门篇之文件
2014/10/20 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python实现随机梯度下降法
2020/03/24 Python
Python 字符串换行的多种方式
2018/09/06 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
小学端午节活动总结
2015/02/11 职场文书
婚礼家长致辞
2015/07/27 职场文书
生产实习心得体会范文
2016/01/22 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android