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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
vue实现前端列表多条件筛选
Oct 26 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 可阅读随机字符串代码
2010/05/26 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python 提取文件的小程序
2009/07/29 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
求职简历自荐信范文
2013/10/21 职场文书
运动会开幕式主持词
2014/03/28 职场文书
幼儿评语大全
2014/04/30 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Python中的套接字编程是什么?
2021/06/21 Python
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android